feat: refactor a lot with shadcn sidebar and updating to Next 15

JamesSingleton · Nov 11, 2024 · 9d0ba0d · 9d0ba0d
1 parent 8984c93
commit 9d0ba0d
Show file tree

Hide file tree

Showing 49 changed files with 3,937 additions and 1,910 deletions.
diff --git a/apps/admin/.eslintrc.json b/apps/admin/.eslintrc.json
@@ -1,3 +1,3 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": ["next/core-web-vitals", "next/typescript"]
 }
diff --git a/apps/admin/app/admin/[teamId]/analytics/page.tsx b/apps/admin/app/admin/[teamId]/analytics/page.tsx
@@ -1,7 +1,7 @@
-export default function AnalyticsPage({
+export default async function AnalyticsPage({
   params,
 }: {
-  params: { teamId: string };
+  params: Promise<{ teamId: string }>;
 }) {
   return (
     <>

diff --git a/apps/admin/app/admin/[teamId]/meets/page.tsx b/apps/admin/app/admin/[teamId]/meets/page.tsx
@@ -22,7 +22,7 @@ import { Badge } from "@repo/ui/badge";
 export default async function MeetsPage({
   params,
 }: {
-  params: { teamId: string };
+  params: Promise<{ teamId: string }>;
 }) {
   return (
     <>

diff --git a/apps/admin/app/admin/[teamId]/page.tsx b/apps/admin/app/admin/[teamId]/page.tsx
@@ -36,20 +36,21 @@ import { cn } from "@/lib/utils";
 import type { Metadata, ResolvingMetadata } from "next";
 
 type Props = {
-  params: { teamId: string };
-  searchParams: { [key: string]: string | string[] | undefined };
+  params: Promise<{ teamId: string }>;
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
 };
 
 export async function generateMetadata(
   { params, searchParams }: Props,
-  parent: ResolvingMetadata,
+  parent: ResolvingMetadata
 ): Promise<Metadata> {
+  const { teamId } = await params;
   const previousMetadata = (await parent).title;
 
   return {
     ...previousMetadata,
     alternates: {
-      canonical: `/admin/${params.teamId}`,
+      canonical: `/admin/${teamId}`,
     },
   };
 }
@@ -78,11 +79,12 @@ const swimMeets = [
   },
 ];
 
-export default function AdminHomePage({
+export default async function AdminHomePage({
   params,
 }: {
-  params: { teamId: string };
+  params: Promise<{ teamId: string }>;
 }) {
+  const { teamId } = await params;
   return (
     <>
       <h1 className="text-lg font-semibold md:text-2xl">Dashboard</h1>
@@ -153,7 +155,7 @@ export default function AdminHomePage({
                 </CardDescription>
               </div>
               <Link
-                href={`/admin/${params.teamId}/meets`}
+                href={`/admin/${teamId}/meets`}
                 className={cn(buttonVariants({ size: "sm" }), "ml-auto gap-1")}
               >
                 View All

diff --git a/apps/admin/app/admin/[teamId]/roster/page.tsx b/apps/admin/app/admin/[teamId]/roster/page.tsx
@@ -35,26 +35,26 @@ export async function generateMetadata(
     params,
     searchParams,
   }: {
-    params: { teamId: string };
-    searchParams: { [key: string]: string | string[] | undefined };
+    params: Promise<{ teamId: string }>;
+    searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
   },
-  parent: ResolvingMetadata,
+  parent: ResolvingMetadata
 ): Promise<Metadata> {
-  const id = params.teamId;
+  const { teamId } = await params;
 
   return {
     title: "Manager Your Roster",
     alternates: {
-      canonical: `/admin/${id}/roster`,
+      canonical: `/admin/${teamId}/roster`,
     },
     description:
       "View and manage your swim team's roster. Add, edit, and remove swimmers as needed.",
     openGraph: {
-      title: "Manager Your Roster",
+      title: "Manage Your Roster",
       description:
         "View and manage your swim team's roster. Add, edit, and remove swimmers as needed.",
       type: "website",
-      url: `/admin/${id}/roster`,
+      url: `/admin/${teamId}/roster`,
       siteName: "Project Aqua",
     },
   };
@@ -64,21 +64,21 @@ export default async function RosterPage({
   params,
   searchParams,
 }: {
-  params: { teamId: string };
-  searchParams: { [key: string]: string | string[] | undefined };
+  params: Promise<{ teamId: string }>;
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
 }) {
-  const { teamId } = params;
+  const { teamId } = await params;
   const rosterData = await getData({ teamId });
-  const { athleteId } = searchParams;
+  const { athleteId } = await searchParams;
   const selectedAthlete = rosterData.find(
-    (athlete) => athlete.id === athleteId,
+    (athlete) => athlete.id === athleteId
   );
   const maleSwimmers = rosterData.filter(
-    (athlete) => athlete.gender === "Male",
+    (athlete) => athlete.gender === "Male"
   );
 
   const femaleSwimmers = rosterData.filter(
-    (athlete) => athlete.gender === "Female",
+    (athlete) => athlete.gender === "Female"
   );
 
   return (

diff --git a/apps/admin/app/admin/[teamId]/swimmers/[swimmerId]/edit/page.tsx b/apps/admin/app/admin/[teamId]/swimmers/[swimmerId]/edit/page.tsx
@@ -1,9 +1,10 @@
 export default async function EditAthlete({
   params,
 }: {
-  params: { teamId: string; athleteId: string };
+  params: Promise<{ teamId: string; athleteId: string }>;
 }) {
-  console.log({ teamId: params.teamId, athleteId: params.athleteId });
+  const { teamId, athleteId } = await params;
+  console.log({ teamId: teamId, athleteId: athleteId });
   return (
     <div>
       <h1>Edit Athlete</h1>

diff --git a/apps/admin/app/admin/[teamId]/swimmers/[swimmerId]/page.tsx b/apps/admin/app/admin/[teamId]/swimmers/[swimmerId]/page.tsx
@@ -54,7 +54,7 @@ interface MeetResult {
 }
 
 async function getSwimmerData(
-  swimmerId: string,
+  swimmerId: string
 ): Promise<{ swimmer: Swimmer; meetResults: MeetResult[] }> {
   // In a real application, this would be an API call or database query
   const swimmer: Swimmer = {
@@ -103,9 +103,10 @@ async function getSwimmerData(
 export default async function AthletePage({
   params,
 }: {
-  params: { teamId: string; swimmerId: string };
+  params: Promise<{ teamId: string; swimmerId: string }>;
 }) {
-  const { swimmer, meetResults } = await getSwimmerData(params.swimmerId);
+  const { teamId, swimmerId } = await params;
+  const { swimmer, meetResults } = await getSwimmerData(swimmerId);
   return (
     <div className="space-y-6">
       <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
@@ -125,7 +126,7 @@ export default async function AthletePage({
           </div>
         </div>
         <Link
-          href={`/admin/${params.teamId}/swimmers/${params.swimmerId}/edit`}
+          href={`/admin/${teamId}/swimmers/${swimmerId}/edit`}
           className={buttonVariants()}
         >
           <Edit className="mr-2 h-4 w-4" />

diff --git a/apps/admin/app/admin/[teamId]/swimmers/create/page.tsx b/apps/admin/app/admin/[teamId]/swimmers/create/page.tsx
@@ -1,7 +1,7 @@
-export default function CreateAthlete({
+export default async function CreateAthlete({
   params,
 }: {
-  params: { teamId: string };
+  params: Promise<{ teamId: string }>;
 }) {
   return (
     <>

diff --git a/apps/admin/app/admin/[teamId]/workouts/[workoutId]/edit/page.tsx b/apps/admin/app/admin/[teamId]/workouts/[workoutId]/edit/page.tsx
@@ -1,7 +1,7 @@
 export default function EditIndividualWorkoutPage({
   params,
 }: {
-  params: { teamId: string; workoutId: string };
+  params: Promise<{ teamId: string; workoutId: string }>;
 }) {
   return (
     <>

diff --git a/apps/admin/app/admin/[teamId]/workouts/[workoutId]/page.tsx b/apps/admin/app/admin/[teamId]/workouts/[workoutId]/page.tsx
@@ -1,7 +1,7 @@
 export default function IndividualWorkoutPage({
   params,
 }: {
-  params: { teamId: string; workoutId: string };
+  params: Promise<{ teamId: string; workoutId: string }>;
 }) {
   return (
     <>

diff --git a/apps/admin/app/admin/[teamId]/workouts/create/page.tsx b/apps/admin/app/admin/[teamId]/workouts/create/page.tsx
@@ -1,7 +1,7 @@
-export default function CreateWorkoutPage({
+export default async function CreateWorkoutPage({
   params,
 }: {
-  params: { teamId: string };
+  params: Promise<{ teamId: string }>;
 }) {
   return (
     <>

diff --git a/apps/admin/app/admin/[teamId]/workouts/page.tsx b/apps/admin/app/admin/[teamId]/workouts/page.tsx
@@ -1,7 +1,7 @@
-export default function WorkoutsPage({
+export default async function WorkoutsPage({
   params,
 }: {
-  params: { teamId: string };
+  params: Promise<{ teamId: string }>;
 }) {
   return (
     <>

diff --git a/apps/admin/app/admin/layout.tsx b/apps/admin/app/admin/layout.tsx
@@ -1,20 +1,19 @@
-import Link from "next/link";
-import { CircleUser, Bell } from "lucide-react";
-import LeftNav from "@/components/left-nav";
-import { Button } from "@repo/ui/button";
-import { Icons } from "@repo/ui/icons";
-
-import {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuItem,
-} from "@repo/ui/dropdown-menu";
-import MobileNav from "@/components/mobile-nav";
-
 import type { Metadata } from "next";
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
+import { AppSidebar } from "@/components/app-sidebar";
+import { Separator } from "@repo/ui/separator";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
 
 export const metadata: Metadata = {
   metadataBase: new URL("http://localhost:3001"),
@@ -35,56 +34,31 @@ export default function AdminLayout({
   modal: React.ReactNode;
 }>) {
   return (
-    <>
-      <div className="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr] bg-muted/40">
-        <aside className="hidden border-r bg-background md:block sticky top-0 h-screen overflow-auto">
-          <div className="flex h-full max-h-screen flex-col gap-2">
-            <Link
-              href="/admin"
-              className="flex items-center gap-2 font-semibold h-14 border-b px-4 lg:h-[60px] lg:px-6"
-            >
-              <Icons.logo className="h-8 w-auto" />
-            </Link>
-            <LeftNav />
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+          <div className="flex items-center gap-2 px-4">
+            <SidebarTrigger className="-ml-1" />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem className="hidden md:block">
+                  <BreadcrumbLink href="#">
+                    Building Your Application
+                  </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator className="hidden md:block" />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
           </div>
-        </aside>
-        <div className="flex flex-col">
-          <header className="flex h-14 items-center gap-4 border-b bg-background px-4 lg:h-[60px] lg:px-6 sticky top-0 z-50 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-            <MobileNav />
-            <div className="ml-auto flex gap-4 items-center">
-              <Button variant="outline" size="icon" className="ml-auto h-8 w-8">
-                <Bell className="h-4 w-4" />
-                <span className="sr-only">Toggle notifications</span>
-              </Button>
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button
-                    variant="secondary"
-                    size="icon"
-                    className="rounded-full"
-                  >
-                    <CircleUser className="h-5 w-5" />
-                    <span className="sr-only">Toggle user menu</span>
-                  </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="end">
-                  <DropdownMenuLabel>My Account</DropdownMenuLabel>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem>Settings</DropdownMenuItem>
-                  <DropdownMenuItem>Support</DropdownMenuItem>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem>Logout</DropdownMenuItem>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </div>
-          </header>
-          <main className="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6 sm:py-0">
-            {children}
-            {modal}
-          </main>
-        </div>
-      </div>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">{children}</div>
+      </SidebarInset>
       <div id="modal-root" />
-    </>
+    </SidebarProvider>
   );
 }
diff --git a/apps/admin/app/globals.css b/apps/admin/app/globals.css
@@ -33,6 +33,22 @@
     --ring: 240 10% 3.9%;
 
     --radius: 0.5rem;
+
+    --sidebar-background: 0 0% 98%;
+
+    --sidebar-foreground: 240 5.3% 26.1%;
+
+    --sidebar-primary: 240 5.9% 10%;
+
+    --sidebar-primary-foreground: 0 0% 98%;
+
+    --sidebar-accent: 240 4.8% 95.9%;
+
+    --sidebar-accent-foreground: 240 5.9% 10%;
+
+    --sidebar-border: 220 13% 91%;
+
+    --sidebar-ring: 217.2 91.2% 59.8%;
   }
 
   .dark {
@@ -63,6 +79,14 @@
     --border: 240 3.7% 15.9%;
     --input: 240 3.7% 15.9%;
     --ring: 240 4.9% 83.9%;
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
   }
 }