feat: added zustand global store, LeftSidebar set to tenant + user data

package-lock.json

@@ -51,7 +51,8 @@
         "react-hook-form": "7.45.4",
         "sharp": "0.32.6",
         "tailwind-merge": "^2.3.0",
-        "tailwindcss-animate": "^1.0.7"
+        "tailwindcss-animate": "^1.0.7",
+        "zustand": "^5.0.4"
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3.2.0",
@@ -15390,6 +15391,35 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/zustand": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.4.tgz",
+      "integrity": "sha512-39VFTN5InDtMd28ZhjLyuTnlytDr9HfwO512Ai4I8ZABCoyAj4F1+sr7sD1jP/+p7k77Iko0Pb5NhgBFDCX0kQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "immer": ">=9.0.6",
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/zwitch": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",

package.json

@@ -61,7 +61,8 @@
     "react-hook-form": "7.45.4",
     "sharp": "0.32.6",
     "tailwind-merge": "^2.3.0",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "zustand": "^5.0.4"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.2.0",

src/app/(frontend)/[tenant]/dashboard/page.client.tsx

@@ -0,0 +1,22 @@
+'use client'
+
+import { Tenant, User } from '@/payload-types'
+import useGlobal from '@/stores'
+
+type Props = {
+  user?: User
+  tenant?: Tenant
+}
+
+const DashboardPageClient = (props?: Props) => {
+  const { user, tenant } = useGlobal()
+  return (
+    <div className="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50">
+      <p>Testing Dashboard Zustand Data Here</p>
+      <p>{user?.email}</p>
+      <p>{tenant?.name}</p>
+    </div>
+  )
+}
+
+export default DashboardPageClient

src/app/(frontend)/[tenant]/dashboard/page.tsx

@@ -8,6 +8,7 @@ import {
 } from '@/components/ui/breadcrumb'
 import { Separator } from '@/components/ui/separator'
 import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'
+import DashboardPageClient from './page.client'
 
 export default function Page() {
   return (
@@ -21,18 +22,18 @@ export default function Page() {
             <Breadcrumb>
               <BreadcrumbList>
                 <BreadcrumbItem>
-                  <BreadcrumbPage className="line-clamp-1">
+                  <BreadcrumbPage className="line-clamp-1">Dashboard</BreadcrumbPage>
-                    Project Management & Task Tracking
-                  </BreadcrumbPage>
                 </BreadcrumbItem>
               </BreadcrumbList>
             </Breadcrumb>
           </div>
         </header>
-        <div className="flex flex-1 flex-col gap-4 p-4">
+        <section className="flex flex-1 flex-col gap-4 p-4">
+          <DashboardPageClient />
+
           <div className="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50" />
           <div className="mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50" />
-        </div>
+        </section>
       </SidebarInset>
       <SidebarRight />
     </SidebarProvider>

src/app/(frontend)/[tenant]/layout.suspense.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import { Tenant } from '@/payload-types'
+import useGlobal from '@/stores'
+import { redirect } from 'next/navigation'
+import { AuthResult } from 'node_modules/payload/dist/auth/operations/auth'
+import { PaginatedDocs } from 'payload'
+import { ReactNode, use, useEffect } from 'react'
+
+type SuspenseProps = {
+  getUserPromise: Promise<AuthResult>
+  getTenantPromise: Promise<PaginatedDocs<Tenant>>
+  children: ReactNode
+}
+const RootLayoutSuspenseFrontend = (props: SuspenseProps) => {
+  const { getUserPromise, getTenantPromise, children } = props
+
+  const { user: authedUser } = use(getUserPromise)
+  const foundTenants = use(getTenantPromise)
+
+  const { setUser, setTenant } = useGlobal()
+
+  useEffect(() => {
+    try {
+      if (!authedUser || !authedUser?.id) return redirect('/login')
+
+      setUser(authedUser)
+    } catch (err) {
+      return redirect('/login')
+    }
+  }, [authedUser])
+
+  useEffect(() => {
+    try {
+      if (!foundTenants?.docs || !foundTenants.docs.length || !foundTenants.docs[0]) {
+        return redirect('/')
+      }
+
+      setTenant(foundTenants.docs[0])
+    } catch (err) {
+      return redirect('/')
+    }
+  }, [foundTenants])
+
+  return <>{children}</>
+}
+
+export default RootLayoutSuspenseFrontend

src/app/(frontend)/[tenant]/layout.tsx

@@ -0,0 +1,60 @@
+import configPromise from '@payload-config'
+import { getPayload, PaginatedDocs } from 'payload'
+import { headers as getHeaders } from 'next/headers.js'
+import { ReactNode, Suspense } from 'react'
+import RootLayoutSuspenseFrontend from './layout.suspense'
+import { Tenant } from '@/payload-types'
+
+export const metadata = {
+  title: 'Next.js',
+  description: 'Generated by Next.js',
+}
+
+type Props = {
+  params: Promise<{
+    tenant?: string
+  }>
+  children: ReactNode
+}
+
+const RootLayoutFrontend = async (props: Props) => {
+  const { params, children } = props
+  const { tenant: tenantSlug } = await params
+
+  const payload = await getPayload({ config: configPromise })
+  const headers = await getHeaders()
+
+  const getUserPromise = payload.auth({ headers })
+
+  const getTenantPromise = payload.find({
+    collection: 'tenants',
+    limit: 1,
+    select: {
+      name: true,
+      domain: true,
+      slug: true,
+    },
+    where: {
+      slug: {
+        equals: tenantSlug,
+      },
+    },
+  }) as Promise<PaginatedDocs<Tenant>>
+
+  return (
+    <html lang="en">
+      <body>
+        <Suspense fallback={<p>Loading layout...</p>}>
+          <RootLayoutSuspenseFrontend
+            getUserPromise={getUserPromise}
+            getTenantPromise={getTenantPromise}
+          >
+            {children}
+          </RootLayoutSuspenseFrontend>
+        </Suspense>
+      </body>
+    </html>
+  )
+}
+
+export default RootLayoutFrontend

src/app/(frontend)/dashboard/layout.tsx

@@ -1,16 +0,0 @@
-export const metadata = {
-  title: 'Next.js',
-  description: 'Generated by Next.js',
-}
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  return (
-    <html lang="en">
-      <body>{children}</body>
-    </html>
-  )
-}

src/app/(frontend)/globals.css

@@ -2,6 +2,8 @@
 @tailwind components;
 @tailwind utilities;
 
+@custom-variant dark (&:is(.dark *));
+
 @layer base {
   h1,
   h2,
@@ -89,8 +91,8 @@
     --success: 196 100% 14%;
     --warning: 34 51% 25%;
     --error: 10 39% 43%;
-  }
+
-  .dark {
+
     --sidebar-background: 240 5.9% 10%;
     --sidebar-foreground: 240 4.8% 95.9%;
     --sidebar-primary: 224.3 76.3% 48%;
@@ -100,6 +102,51 @@
     --sidebar-border: 240 3.7% 15.9%;
     --sidebar-ring: 217.2 91.2% 59.8%;
   }
+
+  .dark {
+    --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%;
+
+    --background: 0 0% 0%;
+    --foreground: 210 40% 98%;
+
+    --card: 0 0% 4%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 0, 0%, 15%, 0.8;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+
+    --success: 196 100% 14%;
+    --warning: 34 51% 25%;
+    --error: 10 39% 43%;
+  }
+
+
 }
 
 @layer base {

src/app/(frontend)/layout.tsx

@@ -2,20 +2,14 @@ import type { Metadata } from 'next'
 
 import React from 'react'
 
-import { AdminBar } from '@/components/AdminBar'
-import { Footer } from '@/Footer/Component'
-import { Header } from '@/Header/Component'
 import { Providers } from '@/providers'
 import { InitTheme } from '@/providers/Theme/InitTheme'
 import { mergeOpenGraph } from '@/utilities/mergeOpenGraph'
-import { draftMode } from 'next/headers'
 
 import './globals.css'
 import { getServerSideURL } from '@/utilities/getURL'
 
 export default async function RootLayout({ children }: { children: React.ReactNode }) {
-  const { isEnabled } = await draftMode()
-
   return (
     <html lang="en" suppressHydrationWarning>
       <head>
@@ -24,17 +18,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
         <link href="/favicon.svg" rel="icon" type="image/svg+xml" />
       </head>
       <body>
-        <Providers>
+        <Providers>{children}</Providers>
-          <AdminBar
-            adminBarProps={{
-              preview: isEnabled,
-            }}
-          />
-
-          <Header />
-          {children}
-          <Footer />
-        </Providers>
       </body>
     </html>
   )

src/app/(frontend)/page.tsx

@@ -1,4 +1,4 @@
-import PageTemplate, { generateMetadata } from './[slug]/page'
+import PageTemplate, { generateMetadata } from './[tenant]/page'
 
 export default PageTemplate
 

src/components/nav-favorites.tsx

@@ -1,12 +1,6 @@
-"use client"
+'use client'
 
-import {
+import { ArrowUpRight, Link, MoreHorizontal, StarOff, Trash2 } from 'lucide-react'
-  ArrowUpRight,
-  Link,
-  MoreHorizontal,
-  StarOff,
-  Trash2,
-} from "lucide-react"
 
 import {
   DropdownMenu,
@@ -14,7 +8,7 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+} from '@/components/ui/dropdown-menu'
 import {
   SidebarGroup,
   SidebarGroupLabel,
@@ -23,17 +17,14 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
   useSidebar,
-} from "@/components/ui/sidebar"
+} from '@/components/ui/sidebar'
+import { SidebarLink } from './sidebar-left'
 
-export function NavFavorites({
+type Props = {
-  favorites,
+  favorites: SidebarLink[]
-}: {
+}
-  favorites: {
+export function NavFavorites(props: Props) {
-    name: string
+  const { favorites } = props
-    url: string
-    emoji: string
-  }[]
-}) {
   const { isMobile } = useSidebar()
 
   return (
@@ -57,8 +48,8 @@ export function NavFavorites({
               </DropdownMenuTrigger>
               <DropdownMenuContent
                 className="w-56 rounded-lg"
-                side={isMobile ? "bottom" : "right"}
+                side={isMobile ? 'bottom' : 'right'}
-                align={isMobile ? "end" : "start"}
+                align={isMobile ? 'end' : 'start'}
               >
                 <DropdownMenuItem>
                   <StarOff className="text-muted-foreground" />

src/components/nav-main.tsx

@@ -1,31 +1,21 @@
-"use client"
+'use client'
 
-import { type LucideIcon } from "lucide-react"
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar'
+import { SidebarLeftMainNavItem } from './sidebar-left'
 
-import {
+type Props = {
-  SidebarMenu,
+  items: SidebarLeftMainNavItem[]
-  SidebarMenuButton,
+}
-  SidebarMenuItem,
+export function NavMain(props: Props) {
-} from "@/components/ui/sidebar"
+  const { items } = props
-
-export function NavMain({
-  items,
-}: {
-  items: {
-    title: string
-    url: string
-    icon: LucideIcon
-    isActive?: boolean
-  }[]
-}) {
   return (
     <SidebarMenu>
       {items.map((item) => (
-        <SidebarMenuItem key={item.title}>
+        <SidebarMenuItem key={item.name}>
           <SidebarMenuButton asChild isActive={item.isActive}>
             <a href={item.url}>
               <item.icon />
-              <span>{item.title}</span>
+              <span>{item.name}</span>
             </a>
           </SidebarMenuButton>
         </SidebarMenuItem>

src/components/nav-secondary.tsx

@@ -1,5 +1,4 @@
-import React from "react"
+import React from 'react'
-import { type LucideIcon } from "lucide-react"
 
 import {
   SidebarGroup,
@@ -8,29 +7,25 @@ import {
   SidebarMenuBadge,
   SidebarMenuButton,
   SidebarMenuItem,
-} from "@/components/ui/sidebar"
+} from '@/components/ui/sidebar'
+import { SidebarLeftMainNavItem } from './sidebar-left'
 
-export function NavSecondary({
+type Props = {
-  items,
+  items: SidebarLeftMainNavItem[]
-  ...props
+} & React.ComponentPropsWithoutRef<typeof SidebarGroup>
-}: {
+
-  items: {
+export function NavSecondary(props: Props) {
-    title: string
+  const { items } = props
-    url: string
-    icon: LucideIcon
-    badge?: React.ReactNode
-  }[]
-} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
   return (
     <SidebarGroup {...props}>
       <SidebarGroupContent>
         <SidebarMenu>
           {items.map((item) => (
-            <SidebarMenuItem key={item.title}>
+            <SidebarMenuItem key={item.name}>
               <SidebarMenuButton asChild>
                 <a href={item.url}>
                   <item.icon />
-                  <span>{item.title}</span>
+                  <span>{item.name}</span>
                 </a>
               </SidebarMenuButton>
               {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}

src/components/nav-workspaces.tsx

@@ -1,10 +1,6 @@
-import { ChevronRight, MoreHorizontal, Plus } from "lucide-react"
+import { ChevronRight, MoreHorizontal, Plus } from 'lucide-react'
 
-import {
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/components/ui/collapsible"
 import {
   SidebarGroup,
   SidebarGroupContent,
@@ -16,20 +12,14 @@ import {
   SidebarMenuSub,
   SidebarMenuSubButton,
   SidebarMenuSubItem,
-} from "@/components/ui/sidebar"
+} from '@/components/ui/sidebar'
+import { SidebarWorkspace } from './sidebar-left'
 
-export function NavWorkspaces({
+type Props = {
-  workspaces,
+  workspaces: SidebarWorkspace[]
-}: {
+}
-  workspaces: {
+export function NavWorkspaces(props: Props) {
-    name: string
+  const { workspaces } = props
-    emoji: React.ReactNode
-    pages: {
-      name: string
-      emoji: React.ReactNode
-    }[]
-  }[]
-}) {
   return (
     <SidebarGroup>
       <SidebarGroupLabel>Workspaces</SidebarGroupLabel>

src/components/sidebar-left.tsx

@@ -1,276 +1,166 @@
-"use client"
+'use client'
 
-import * as React from "react"
+import * as React from 'react'
 import {
-  AudioWaveform,
-  Blocks,
   Calendar,
-  Command,
   Home,
   Inbox,
+  LucideIcon,
   MessageCircleQuestion,
   Search,
   Settings2,
-  Sparkles,
+  ChefHat,
-  Trash2,
+  Dumbbell,
-} from "lucide-react"
+  Rabbit,
+} from 'lucide-react'
 
-import { NavFavorites } from "@/components/nav-favorites"
+import { NavMain } from '@/components/nav-main'
-import { NavMain } from "@/components/nav-main"
+import { NavSecondary } from '@/components/nav-secondary'
-import { NavSecondary } from "@/components/nav-secondary"
+import { TeamSwitcher } from '@/components/team-switcher'
-import { NavWorkspaces } from "@/components/nav-workspaces"
+import { Sidebar, SidebarContent, SidebarHeader, SidebarRail } from '@/components/ui/sidebar'
-import { TeamSwitcher } from "@/components/team-switcher"
+import useGlobal from '@/stores'
-import {
+import { Tenant } from '@/payload-types'
-  Sidebar,
-  SidebarContent,
-  SidebarHeader,
-  SidebarRail,
-} from "@/components/ui/sidebar"
 
-// This is sample data.
+export type SidebarLeftTeam = {
-const data = {
+  id: number
-  teams: [
+  name: string
+  logo: string
+  roles: string[]
+  slug: string
+  domain: string
+}
+
+export type SidebarLeftMainNavItem = {
+  name: string
+  url: string
+  icon: LucideIcon
+  isActive?: boolean
+  badge?: number
+}
+
+export type SidebarLink = {
+  name: string
+  url: string
+  emoji?: string
+}
+
+export type SidebarWorkspace = {
+  name: string
+  emoji?: string
+  pages: SidebarLink[]
+}
+
+const makeNavMainItems = (activeTenant: Tenant): SidebarLeftMainNavItem[] => {
+  return [
     {
-      name: "Acme Inc",
+      name: 'Home',
-      logo: Command,
+      url: '#',
-      plan: "Enterprise",
-    },
-    {
-      name: "Acme Corp.",
-      logo: AudioWaveform,
-      plan: "Startup",
-    },
-    {
-      name: "Evil Corp.",
-      logo: Command,
-      plan: "Free",
-    },
-  ],
-  navMain: [
-    {
-      title: "Search",
-      url: "#",
-      icon: Search,
-    },
-    {
-      title: "Ask AI",
-      url: "#",
-      icon: Sparkles,
-    },
-    {
-      title: "Home",
-      url: "#",
       icon: Home,
-      isActive: true,
     },
     {
-      title: "Inbox",
+      name: 'Calendar',
-      url: "#",
+      url: `/${activeTenant.slug}/calendar`,
-      icon: Inbox,
-      badge: "10",
-    },
-  ],
-  navSecondary: [
-    {
-      title: "Calendar",
-      url: "#",
       icon: Calendar,
     },
     {
-      title: "Settings",
+      name: 'Workouts',
-      url: "#",
+      url: `/${activeTenant.slug}/workouts`,
+      icon: Dumbbell,
+    },
+    {
+      name: 'Nutrition',
+      url: `/${activeTenant.slug}/nutrition`,
+      icon: ChefHat,
+    },
+    {
+      name: 'Habbits',
+      url: `/${activeTenant.slug}/habbits`,
+      icon: Rabbit,
+    },
+    {
+      name: 'Inbox',
+      url: `/${activeTenant.slug}/inbox`,
+      icon: Inbox,
+    },
+  ]
+}
+
+const makeNavSecondaryItems = (activeTenant: Tenant): SidebarLeftMainNavItem[] => {
+  return [
+    {
+      name: 'Search',
+      url: `/${activeTenant.slug}/search`,
+      icon: Search,
+    },
+    {
+      name: 'Settings',
+      url: `/${activeTenant.slug}/settings`,
       icon: Settings2,
     },
     {
-      title: "Templates",
+      name: 'Help',
-      url: "#",
+      url: `/${activeTenant.slug}/help`,
-      icon: Blocks,
-    },
-    {
-      title: "Trash",
-      url: "#",
-      icon: Trash2,
-    },
-    {
-      title: "Help",
-      url: "#",
       icon: MessageCircleQuestion,
     },
-  ],
+  ]
-  favorites: [
-    {
-      name: "Project Management & Task Tracking",
-      url: "#",
-      emoji: "📊",
-    },
-    {
-      name: "Family Recipe Collection & Meal Planning",
-      url: "#",
-      emoji: "🍳",
-    },
-    {
-      name: "Fitness Tracker & Workout Routines",
-      url: "#",
-      emoji: "💪",
-    },
-    {
-      name: "Book Notes & Reading List",
-      url: "#",
-      emoji: "📚",
-    },
-    {
-      name: "Sustainable Gardening Tips & Plant Care",
-      url: "#",
-      emoji: "🌱",
-    },
-    {
-      name: "Language Learning Progress & Resources",
-      url: "#",
-      emoji: "🗣️",
-    },
-    {
-      name: "Home Renovation Ideas & Budget Tracker",
-      url: "#",
-      emoji: "🏠",
-    },
-    {
-      name: "Personal Finance & Investment Portfolio",
-      url: "#",
-      emoji: "💰",
-    },
-    {
-      name: "Movie & TV Show Watchlist with Reviews",
-      url: "#",
-      emoji: "🎬",
-    },
-    {
-      name: "Daily Habit Tracker & Goal Setting",
-      url: "#",
-      emoji: "✅",
-    },
-  ],
-  workspaces: [
-    {
-      name: "Personal Life Management",
-      emoji: "🏠",
-      pages: [
-        {
-          name: "Daily Journal & Reflection",
-          url: "#",
-          emoji: "📔",
-        },
-        {
-          name: "Health & Wellness Tracker",
-          url: "#",
-          emoji: "🍏",
-        },
-        {
-          name: "Personal Growth & Learning Goals",
-          url: "#",
-          emoji: "🌟",
-        },
-      ],
-    },
-    {
-      name: "Professional Development",
-      emoji: "💼",
-      pages: [
-        {
-          name: "Career Objectives & Milestones",
-          url: "#",
-          emoji: "🎯",
-        },
-        {
-          name: "Skill Acquisition & Training Log",
-          url: "#",
-          emoji: "🧠",
-        },
-        {
-          name: "Networking Contacts & Events",
-          url: "#",
-          emoji: "🤝",
-        },
-      ],
-    },
-    {
-      name: "Creative Projects",
-      emoji: "🎨",
-      pages: [
-        {
-          name: "Writing Ideas & Story Outlines",
-          url: "#",
-          emoji: "✍️",
-        },
-        {
-          name: "Art & Design Portfolio",
-          url: "#",
-          emoji: "🖼️",
-        },
-        {
-          name: "Music Composition & Practice Log",
-          url: "#",
-          emoji: "🎵",
-        },
-      ],
-    },
-    {
-      name: "Home Management",
-      emoji: "🏡",
-      pages: [
-        {
-          name: "Household Budget & Expense Tracking",
-          url: "#",
-          emoji: "💰",
-        },
-        {
-          name: "Home Maintenance Schedule & Tasks",
-          url: "#",
-          emoji: "🔧",
-        },
-        {
-          name: "Family Calendar & Event Planning",
-          url: "#",
-          emoji: "📅",
-        },
-      ],
-    },
-    {
-      name: "Travel & Adventure",
-      emoji: "🧳",
-      pages: [
-        {
-          name: "Trip Planning & Itineraries",
-          url: "#",
-          emoji: "🗺️",
-        },
-        {
-          name: "Travel Bucket List & Inspiration",
-          url: "#",
-          emoji: "🌎",
-        },
-        {
-          name: "Travel Journal & Photo Gallery",
-          url: "#",
-          emoji: "📸",
-        },
-      ],
-    },
-  ],
 }
 
-export function SidebarLeft({
+export type SidebarLeftProps = {
-  ...props
+  teams?: SidebarLeftTeam[]
-}: React.ComponentProps<typeof Sidebar>) {
+  navMain?: SidebarLeftMainNavItem[]
+  navSecondary?: SidebarLeftMainNavItem[]
+  favorites?: SidebarLink[]
+  workspaces?: SidebarWorkspace[]
+} & React.ComponentProps<typeof Sidebar>
+
+export function SidebarLeft(props: SidebarLeftProps) {
+  const { favorites, workspaces, ...rest } = props
+
+  const { user, tenant: activeTenant } = useGlobal()
+
+  const teams = React.useMemo(() => {
+    if (props.teams) return props.teams
+    if (!user?.tenants?.length) return [] as SidebarLeftTeam[]
+
+    const teams: SidebarLeftTeam[] = user.tenants.map((t) => {
+      const tenant = t.tenant as Tenant
+      return {
+        id: tenant.id,
+        name: tenant.name,
+        domain: tenant.domain || '',
+        slug: tenant.slug,
+        logo: '', // TODO: add logo to tenate record
+        roles: t.roles,
+        isActive: t.id === activeTenant?.id,
+      }
+    })
+    return teams
+  }, [props.teams, activeTenant, user])
+
+  const navMain = React.useMemo(() => {
+    if (props.navMain) return props.navMain
+    if (!activeTenant) return []
+
+    return makeNavMainItems(activeTenant)
+  }, [props.navMain, activeTenant])
+
+  const navSecondary = React.useMemo(() => {
+    if (props.navSecondary) return props.navSecondary
+    if (!activeTenant) return []
+
+    return makeNavSecondaryItems(activeTenant)
+  }, [props.navMain, activeTenant])
+
   return (
-    <Sidebar className="border-r-0" {...props}>
+    <Sidebar className="border-r-0" {...rest}>
       <SidebarHeader>
-        <TeamSwitcher teams={data.teams} />
+        <TeamSwitcher teams={teams} />
-        <NavMain items={data.navMain} />
+        <NavMain items={navMain} />
       </SidebarHeader>
       <SidebarContent>
-        <NavFavorites favorites={data.favorites} />
+        {/*<NavFavorites favorites={favorites} />*/}
-        <NavWorkspaces workspaces={data.workspaces} />
+        {/*<NavWorkspaces workspaces={workspaces} />*/}
-        <NavSecondary items={data.navSecondary} className="mt-auto" />
+        <NavSecondary items={navSecondary} className="mt-auto" />
       </SidebarContent>
       <SidebarRail />
     </Sidebar>

src/components/team-switcher.tsx

@@ -1,7 +1,7 @@
-"use client"
+'use client'
 
-import * as React from "react"
+import * as React from 'react'
-import { ChevronDown, Plus } from "lucide-react"
+import { ChevronDown, Plus } from 'lucide-react'
 
 import {
   DropdownMenu,
@@ -11,24 +11,29 @@ import {
   DropdownMenuSeparator,
   DropdownMenuShortcut,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+} from '@/components/ui/dropdown-menu'
-import {
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar'
-  SidebarMenu,
+import { SidebarLeftTeam } from './sidebar-left'
-  SidebarMenuButton,
+import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar'
-  SidebarMenuItem,
-} from "@/components/ui/sidebar"
 
-export function TeamSwitcher({
+const makeDefaultAcronym = (name: string, maxLength: number = 2) => {
-  teams,
+  return name
-}: {
+    .split(' ')
-  teams: {
+    .map((part) => part[0])
-    name: string
+    .slice(0, maxLength)
-    logo: React.ElementType
+}
-    plan: string
+
-  }[]
+type Props = {
-}) {
+  teams: SidebarLeftTeam[]
+}
+export function TeamSwitcher(props: Props) {
+  const { teams } = props
   const [activeTeam, setActiveTeam] = React.useState(teams[0])
 
+  React.useEffect(() => {
+    if (!activeTeam && teams.length) setActiveTeam(teams[0])
+  }, [teams])
+
   if (!activeTeam) {
     return null
   }
@@ -40,7 +45,12 @@ export function TeamSwitcher({
           <DropdownMenuTrigger asChild>
             <SidebarMenuButton className="w-fit px-1.5">
               <div className="flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
-                <activeTeam.logo className="size-3" />
+                <Avatar className="h-8 w-8 rounded-lg shrink-0">
+                  <AvatarImage src={activeTeam.logo} alt={activeTeam.logo} />
+                  <AvatarFallback className="rounded-lg">
+                    {makeDefaultAcronym(activeTeam.name)}
+                  </AvatarFallback>
+                </Avatar>
               </div>
               <span className="truncate font-semibold">{activeTeam.name}</span>
               <ChevronDown className="opacity-50" />
@@ -52,9 +62,7 @@ export function TeamSwitcher({
             side="bottom"
             sideOffset={4}
           >
-            <DropdownMenuLabel className="text-xs text-muted-foreground">
+            <DropdownMenuLabel className="text-xs text-muted-foreground">Teams</DropdownMenuLabel>
-              Teams
-            </DropdownMenuLabel>
             {teams.map((team, index) => (
               <DropdownMenuItem
                 key={team.name}
@@ -62,7 +70,12 @@ export function TeamSwitcher({
                 className="gap-2 p-2"
               >
                 <div className="flex size-6 items-center justify-center rounded-sm border">
-                  <team.logo className="size-4 shrink-0" />
+                  <Avatar className="size-8 rounded-lg shrink-0">
+                    <AvatarImage src={team.logo} alt={team.logo} />
+                    <AvatarFallback className="rounded-lg">
+                      {makeDefaultAcronym(team.name)}
+                    </AvatarFallback>
+                  </Avatar>
                 </div>
                 {team.name}
                 <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>

src/components/ui/sidebar.tsx

@@ -1,39 +1,34 @@
-"use client"
+'use client'
 
-import * as React from "react"
+import * as React from 'react'
-import { Slot } from "@radix-ui/react-slot"
+import { Slot } from '@radix-ui/react-slot'
-import { VariantProps, cva } from "class-variance-authority"
+import { VariantProps, cva } from 'class-variance-authority'
-import { PanelLeft } from "lucide-react"
+import { PanelLeft } from 'lucide-react'
 
-import { useIsMobile } from "@/hooks/use-mobile"
+import { useIsMobile } from '@/hooks/use-mobile'
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
-import { Button } from "@/components/ui/button"
+import { Button } from '@/components/ui/button'
-import { Input } from "@/components/ui/input"
+import { Input } from '@/components/ui/input'
-import { Separator } from "@/components/ui/separator"
+import { Separator } from '@/components/ui/separator'
 import {
   Sheet,
   SheetContent,
   SheetDescription,
   SheetHeader,
   SheetTitle,
-} from "@/components/ui/sheet"
+} from '@/components/ui/sheet'
-import { Skeleton } from "@/components/ui/skeleton"
+import { Skeleton } from '@/components/ui/skeleton'
-import {
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
 
-const SIDEBAR_COOKIE_NAME = "sidebar_state"
+const SIDEBAR_COOKIE_NAME = 'sidebar_state'
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
-const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH = '16rem'
-const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_MOBILE = '18rem'
-const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_WIDTH_ICON = '3rem'
-const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
 
 type SidebarContextProps = {
-  state: "expanded" | "collapsed"
+  state: 'expanded' | 'collapsed'
   open: boolean
   setOpen: (open: boolean) => void
   openMobile: boolean
@@ -47,7 +42,7 @@ const SidebarContext = React.createContext<SidebarContextProps | null>(null)
 function useSidebar() {
   const context = React.useContext(SidebarContext)
   if (!context) {
-    throw new Error("useSidebar must be used within a SidebarProvider.")
+    throw new Error('useSidebar must be used within a SidebarProvider.')
   }
 
   return context
@@ -55,7 +50,7 @@ function useSidebar() {
 
 const SidebarProvider = React.forwardRef<
   HTMLDivElement,
-  React.ComponentProps<"div"> & {
+  React.ComponentProps<'div'> & {
     defaultOpen?: boolean
     open?: boolean
     onOpenChange?: (open: boolean) => void
@@ -71,7 +66,7 @@ const SidebarProvider = React.forwardRef<
       children,
       ...props
     },
-    ref
+    ref,
   ) => {
     const isMobile = useIsMobile()
     const [openMobile, setOpenMobile] = React.useState(false)
@@ -82,7 +77,7 @@ const SidebarProvider = React.forwardRef<
     const open = openProp ?? _open
     const setOpen = React.useCallback(
       (value: boolean | ((value: boolean) => boolean)) => {
-        const openState = typeof value === "function" ? value(open) : value
+        const openState = typeof value === 'function' ? value(open) : value
         if (setOpenProp) {
           setOpenProp(openState)
         } else {
@@ -92,35 +87,30 @@ const SidebarProvider = React.forwardRef<
         // This sets the cookie to keep the sidebar state.
         document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
       },
-      [setOpenProp, open]
+      [setOpenProp, open],
     )
 
     // Helper to toggle the sidebar.
     const toggleSidebar = React.useCallback(() => {
-      return isMobile
+      return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
-        ? setOpenMobile((open) => !open)
-        : setOpen((open) => !open)
     }, [isMobile, setOpen, setOpenMobile])
 
     // Adds a keyboard shortcut to toggle the sidebar.
     React.useEffect(() => {
       const handleKeyDown = (event: KeyboardEvent) => {
-        if (
+        if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
-          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
-          (event.metaKey || event.ctrlKey)
-        ) {
           event.preventDefault()
           toggleSidebar()
         }
       }
 
-      window.addEventListener("keydown", handleKeyDown)
+      window.addEventListener('keydown', handleKeyDown)
-      return () => window.removeEventListener("keydown", handleKeyDown)
+      return () => window.removeEventListener('keydown', handleKeyDown)
     }, [toggleSidebar])
 
     // We add a state so that we can do data-state="expanded" or "collapsed".
     // This makes it easier to style the sidebar with Tailwind classes.
-    const state = open ? "expanded" : "collapsed"
+    const state = open ? 'expanded' : 'collapsed'
 
     const contextValue = React.useMemo<SidebarContextProps>(
       () => ({
@@ -132,7 +122,7 @@ const SidebarProvider = React.forwardRef<
         setOpenMobile,
         toggleSidebar,
       }),
-      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
     )
 
     return (
@@ -141,14 +131,14 @@ const SidebarProvider = React.forwardRef<
           <div
             style={
               {
-                "--sidebar-width": SIDEBAR_WIDTH,
+                '--sidebar-width': SIDEBAR_WIDTH,
-                "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+                '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
                 ...style,
               } as React.CSSProperties
             }
             className={cn(
-              "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
+              'group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar',
-              className
+              className,
             )}
             ref={ref}
             {...props}
@@ -158,37 +148,37 @@ const SidebarProvider = React.forwardRef<
         </TooltipProvider>
       </SidebarContext.Provider>
     )
-  }
+  },
 )
-SidebarProvider.displayName = "SidebarProvider"
+SidebarProvider.displayName = 'SidebarProvider'
 
 const Sidebar = React.forwardRef<
   HTMLDivElement,
-  React.ComponentProps<"div"> & {
+  React.ComponentProps<'div'> & {
-    side?: "left" | "right"
+    side?: 'left' | 'right'
-    variant?: "sidebar" | "floating" | "inset"
+    variant?: 'sidebar' | 'floating' | 'inset'
-    collapsible?: "offcanvas" | "icon" | "none"
+    collapsible?: 'offcanvas' | 'icon' | 'none'
   }
 >(
   (
     {
-      side = "left",
+      side = 'left',
-      variant = "sidebar",
+      variant = 'sidebar',
-      collapsible = "offcanvas",
+      collapsible = 'offcanvas',
       className,
       children,
       ...props
     },
-    ref
+    ref,
   ) => {
     const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
 
-    if (collapsible === "none") {
+    if (collapsible === 'none') {
       return (
         <div
           className={cn(
-            "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
+            'flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground',
-            className
+            className,
           )}
           ref={ref}
           {...props}
@@ -207,7 +197,7 @@ const Sidebar = React.forwardRef<
             className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
             style={
               {
-                "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+                '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
               } as React.CSSProperties
             }
             side={side}
@@ -227,32 +217,32 @@ const Sidebar = React.forwardRef<
         ref={ref}
         className="group peer hidden text-sidebar-foreground md:block"
         data-state={state}
-        data-collapsible={state === "collapsed" ? collapsible : ""}
+        data-collapsible={state === 'collapsed' ? collapsible : ''}
         data-variant={variant}
         data-side={side}
       >
         {/* This is what handles the sidebar gap on desktop */}
         <div
           className={cn(
-            "relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
+            'relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear',
-            "group-data-[collapsible=offcanvas]:w-0",
+            'group-data-[collapsible=offcanvas]:w-0',
-            "group-data-[side=right]:rotate-180",
+            'group-data-[side=right]:rotate-180',
-            variant === "floating" || variant === "inset"
+            variant === 'floating' || variant === 'inset'
-              ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
+              ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'
-              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
+              : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',
           )}
         />
         <div
           className={cn(
-            "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
+            'fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex',
-            side === "left"
+            side === 'left'
-              ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+              ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
-              : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+              : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
             // Adjust the padding for floating and inset variants.
-            variant === "floating" || variant === "inset"
+            variant === 'floating' || variant === 'inset'
-              ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
+              ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
-              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+              : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',
-            className
+            className,
           )}
           {...props}
         >
@@ -265,9 +255,9 @@ const Sidebar = React.forwardRef<
         </div>
       </div>
     )
-  }
+  },
 )
-Sidebar.displayName = "Sidebar"
+Sidebar.displayName = 'Sidebar'
 
 const SidebarTrigger = React.forwardRef<
   React.ElementRef<typeof Button>,
@@ -281,7 +271,7 @@ const SidebarTrigger = React.forwardRef<
       data-sidebar="trigger"
       variant="ghost"
       size="icon"
-      className={cn("h-7 w-7", className)}
+      className={cn('h-7 w-7', className)}
       onClick={(event) => {
         onClick?.(event)
         toggleSidebar()
@@ -293,54 +283,52 @@ const SidebarTrigger = React.forwardRef<
     </Button>
   )
 })
-SidebarTrigger.displayName = "SidebarTrigger"
+SidebarTrigger.displayName = 'SidebarTrigger'
 
-const SidebarRail = React.forwardRef<
+const SidebarRail = React.forwardRef<HTMLButtonElement, React.ComponentProps<'button'>>(
-  HTMLButtonElement,
+  ({ className, ...props }, ref) => {
-  React.ComponentProps<"button">
+    const { toggleSidebar } = useSidebar()
->(({ className, ...props }, ref) => {
-  const { toggleSidebar } = useSidebar()
 
-  return (
+    return (
-    <button
+      <button
-      ref={ref}
+        ref={ref}
-      data-sidebar="rail"
+        data-sidebar="rail"
-      aria-label="Toggle Sidebar"
+        aria-label="Toggle Sidebar"
-      tabIndex={-1}
+        tabIndex={-1}
-      onClick={toggleSidebar}
+        onClick={toggleSidebar}
-      title="Toggle Sidebar"
+        title="Toggle Sidebar"
-      className={cn(
+        className={cn(
-        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+          'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',
-        "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+          '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',
-        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+          '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
-        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
+          'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',
-        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+          '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
-        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+          '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
-        className
+          className,
-      )}
+        )}
-      {...props}
+        {...props}
-    />
+      />
-  )
+    )
-})
+  },
-SidebarRail.displayName = "SidebarRail"
+)
+SidebarRail.displayName = 'SidebarRail'
 
-const SidebarInset = React.forwardRef<
+const SidebarInset = React.forwardRef<HTMLDivElement, React.ComponentProps<'main'>>(
-  HTMLDivElement,
+  ({ className, ...props }, ref) => {
-  React.ComponentProps<"main">
+    return (
->(({ className, ...props }, ref) => {
+      <main
-  return (
+        ref={ref}
-    <main
+        className={cn(
-      ref={ref}
+          'relative flex w-full flex-1 flex-col bg-background',
-      className={cn(
+          'md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
-        "relative flex w-full flex-1 flex-col bg-background",
+          className,
-        "md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+        )}
-        className
+        {...props}
-      )}
+      />
-      {...props}
+    )
-    />
+  },
-  )
+)
-})
+SidebarInset.displayName = 'SidebarInset'
-SidebarInset.displayName = "SidebarInset"
 
 const SidebarInput = React.forwardRef<
   React.ElementRef<typeof Input>,
@@ -351,44 +339,42 @@ const SidebarInput = React.forwardRef<
       ref={ref}
       data-sidebar="input"
       className={cn(
-        "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+        'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',
-        className
+        className,
       )}
       {...props}
     />
   )
 })
-SidebarInput.displayName = "SidebarInput"
+SidebarInput.displayName = 'SidebarInput'
 
-const SidebarHeader = React.forwardRef<
+const SidebarHeader = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(
-  HTMLDivElement,
+  ({ className, ...props }, ref) => {
-  React.ComponentProps<"div">
+    return (
->(({ className, ...props }, ref) => {
+      <div
-  return (
+        ref={ref}
-    <div
+        data-sidebar="header"
-      ref={ref}
+        className={cn('flex flex-col gap-2 p-2', className)}
-      data-sidebar="header"
+        {...props}
-      className={cn("flex flex-col gap-2 p-2", className)}
+      />
-      {...props}
+    )
-    />
+  },
-  )
+)
-})
+SidebarHeader.displayName = 'SidebarHeader'
-SidebarHeader.displayName = "SidebarHeader"
 
-const SidebarFooter = React.forwardRef<
+const SidebarFooter = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(
-  HTMLDivElement,
+  ({ className, ...props }, ref) => {
-  React.ComponentProps<"div">
+    return (
->(({ className, ...props }, ref) => {
+      <div
-  return (
+        ref={ref}
-    <div
+        data-sidebar="footer"
-      ref={ref}
+        className={cn('flex flex-col gap-2 p-2', className)}
-      data-sidebar="footer"
+        {...props}
-      className={cn("flex flex-col gap-2 p-2", className)}
+      />
-      {...props}
+    )
-    />
+  },
-  )
+)
-})
+SidebarFooter.displayName = 'SidebarFooter'
-SidebarFooter.displayName = "SidebarFooter"
 
 const SidebarSeparator = React.forwardRef<
   React.ElementRef<typeof Separator>,
@@ -398,154 +384,149 @@ const SidebarSeparator = React.forwardRef<
     <Separator
       ref={ref}
       data-sidebar="separator"
-      className={cn("mx-2 w-auto bg-sidebar-border", className)}
+      className={cn('mx-2 w-auto bg-sidebar-border', className)}
       {...props}
     />
   )
 })
-SidebarSeparator.displayName = "SidebarSeparator"
+SidebarSeparator.displayName = 'SidebarSeparator'
 
-const SidebarContent = React.forwardRef<
+const SidebarContent = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(
-  HTMLDivElement,
+  ({ className, ...props }, ref) => {
-  React.ComponentProps<"div">
+    return (
->(({ className, ...props }, ref) => {
+      <div
-  return (
+        ref={ref}
-    <div
+        data-sidebar="content"
-      ref={ref}
+        className={cn(
-      data-sidebar="content"
+          'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
-      className={cn(
+          className,
-        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        )}
-        className
+        {...props}
-      )}
+      />
-      {...props}
+    )
-    />
+  },
-  )
+)
-})
+SidebarContent.displayName = 'SidebarContent'
-SidebarContent.displayName = "SidebarContent"
 
-const SidebarGroup = React.forwardRef<
+const SidebarGroup = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(
-  HTMLDivElement,
+  ({ className, ...props }, ref) => {
-  React.ComponentProps<"div">
+    return (
->(({ className, ...props }, ref) => {
+      <div
-  return (
+        ref={ref}
-    <div
+        data-sidebar="group"
-      ref={ref}
+        className={cn('relative flex w-full min-w-0 flex-col p-2', className)}
-      data-sidebar="group"
+        {...props}
-      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      />
-      {...props}
+    )
-    />
+  },
-  )
+)
-})
+SidebarGroup.displayName = 'SidebarGroup'
-SidebarGroup.displayName = "SidebarGroup"
 
 const SidebarGroupLabel = React.forwardRef<
   HTMLDivElement,
-  React.ComponentProps<"div"> & { asChild?: boolean }
+  React.ComponentProps<'div'> & { asChild?: boolean }
 >(({ className, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "div"
+  const Comp = asChild ? Slot : 'div'
 
   return (
     <Comp
       ref={ref}
       data-sidebar="group-label"
       className={cn(
-        "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        'flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
-        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
-        className
+        className,
       )}
       {...props}
     />
   )
 })
-SidebarGroupLabel.displayName = "SidebarGroupLabel"
+SidebarGroupLabel.displayName = 'SidebarGroupLabel'
 
 const SidebarGroupAction = React.forwardRef<
   HTMLButtonElement,
-  React.ComponentProps<"button"> & { asChild?: boolean }
+  React.ComponentProps<'button'> & { asChild?: boolean }
 >(({ className, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "button"
+  const Comp = asChild ? Slot : 'button'
 
   return (
     <Comp
       ref={ref}
       data-sidebar="group-action"
       className={cn(
-        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
         // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 after:md:hidden",
+        'after:absolute after:-inset-2 after:md:hidden',
-        "group-data-[collapsible=icon]:hidden",
+        'group-data-[collapsible=icon]:hidden',
-        className
+        className,
       )}
       {...props}
     />
   )
 })
-SidebarGroupAction.displayName = "SidebarGroupAction"
+SidebarGroupAction.displayName = 'SidebarGroupAction'
 
-const SidebarGroupContent = React.forwardRef<
+const SidebarGroupContent = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(
-  HTMLDivElement,
+  ({ className, ...props }, ref) => (
-  React.ComponentProps<"div">
+    <div
->(({ className, ...props }, ref) => (
+      ref={ref}
-  <div
+      data-sidebar="group-content"
-    ref={ref}
+      className={cn('w-full text-sm', className)}
-    data-sidebar="group-content"
+      {...props}
-    className={cn("w-full text-sm", className)}
+    />
-    {...props}
+  ),
-  />
+)
-))
+SidebarGroupContent.displayName = 'SidebarGroupContent'
-SidebarGroupContent.displayName = "SidebarGroupContent"
 
-const SidebarMenu = React.forwardRef<
+const SidebarMenu = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'>>(
-  HTMLUListElement,
+  ({ className, ...props }, ref) => (
-  React.ComponentProps<"ul">
+    <ul
->(({ className, ...props }, ref) => (
+      ref={ref}
-  <ul
+      data-sidebar="menu"
-    ref={ref}
+      className={cn('flex w-full min-w-0 flex-col gap-1', className)}
-    data-sidebar="menu"
+      {...props}
-    className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+    />
-    {...props}
+  ),
-  />
+)
-))
+SidebarMenu.displayName = 'SidebarMenu'
-SidebarMenu.displayName = "SidebarMenu"
 
-const SidebarMenuItem = React.forwardRef<
+const SidebarMenuItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(
-  HTMLLIElement,
+  ({ className, ...props }, ref) => (
-  React.ComponentProps<"li">
+    <li
->(({ className, ...props }, ref) => (
+      ref={ref}
-  <li
+      data-sidebar="menu-item"
-    ref={ref}
+      className={cn('group/menu-item relative', className)}
-    data-sidebar="menu-item"
+      {...props}
-    className={cn("group/menu-item relative", className)}
+    />
-    {...props}
+  ),
-  />
+)
-))
+SidebarMenuItem.displayName = 'SidebarMenuItem'
-SidebarMenuItem.displayName = "SidebarMenuItem"
 
 const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
   {
     variants: {
       variant: {
-        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
         outline:
-          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
       },
       size: {
-        default: "h-8 text-sm",
+        default: 'h-8 text-sm',
-        sm: "h-7 text-xs",
+        sm: 'h-7 text-xs',
-        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
+        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',
       },
     },
     defaultVariants: {
-      variant: "default",
+      variant: 'default',
-      size: "default",
+      size: 'default',
     },
-  }
+  },
 )
 
 const SidebarMenuButton = React.forwardRef<
   HTMLButtonElement,
-  React.ComponentProps<"button"> & {
+  React.ComponentProps<'button'> & {
     asChild?: boolean
     isActive?: boolean
     tooltip?: string | React.ComponentProps<typeof TooltipContent>
@@ -555,15 +536,15 @@ const SidebarMenuButton = React.forwardRef<
     {
       asChild = false,
       isActive = false,
-      variant = "default",
+      variant = 'default',
-      size = "default",
+      size = 'default',
       tooltip,
       className,
       ...props
     },
-    ref
+    ref,
   ) => {
-    const Comp = asChild ? Slot : "button"
+    const Comp = asChild ? Slot : 'button'
     const { isMobile, state } = useSidebar()
 
     const button = (
@@ -581,7 +562,7 @@ const SidebarMenuButton = React.forwardRef<
       return button
     }
 
-    if (typeof tooltip === "string") {
+    if (typeof tooltip === 'string') {
       tooltip = {
         children: tooltip,
       }
@@ -593,70 +574,69 @@ const SidebarMenuButton = React.forwardRef<
         <TooltipContent
           side="right"
           align="center"
-          hidden={state !== "collapsed" || isMobile}
+          hidden={state !== 'collapsed' || isMobile}
           {...tooltip}
         />
       </Tooltip>
     )
-  }
+  },
 )
-SidebarMenuButton.displayName = "SidebarMenuButton"
+SidebarMenuButton.displayName = 'SidebarMenuButton'
 
 const SidebarMenuAction = React.forwardRef<
   HTMLButtonElement,
-  React.ComponentProps<"button"> & {
+  React.ComponentProps<'button'> & {
     asChild?: boolean
     showOnHover?: boolean
   }
 >(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "button"
+  const Comp = asChild ? Slot : 'button'
 
   return (
     <Comp
       ref={ref}
       data-sidebar="menu-action"
       className={cn(
-        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+        'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',
         // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 after:md:hidden",
+        'after:absolute after:-inset-2 after:md:hidden',
-        "peer-data-[size=sm]/menu-button:top-1",
+        'peer-data-[size=sm]/menu-button:top-1',
-        "peer-data-[size=default]/menu-button:top-1.5",
+        'peer-data-[size=default]/menu-button:top-1.5',
-        "peer-data-[size=lg]/menu-button:top-2.5",
+        'peer-data-[size=lg]/menu-button:top-2.5',
-        "group-data-[collapsible=icon]:hidden",
+        'group-data-[collapsible=icon]:hidden',
         showOnHover &&
-          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
+          'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',
-        className
+        className,
       )}
       {...props}
     />
   )
 })
-SidebarMenuAction.displayName = "SidebarMenuAction"
+SidebarMenuAction.displayName = 'SidebarMenuAction'
 
-const SidebarMenuBadge = React.forwardRef<
+const SidebarMenuBadge = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(
-  HTMLDivElement,
+  ({ className, ...props }, ref) => (
-  React.ComponentProps<"div">
+    <div
->(({ className, ...props }, ref) => (
+      ref={ref}
-  <div
+      data-sidebar="menu-badge"
-    ref={ref}
+      className={cn(
-    data-sidebar="menu-badge"
+        'pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground',
-    className={cn(
+        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
-      "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground",
+        'peer-data-[size=sm]/menu-button:top-1',
-      "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+        'peer-data-[size=default]/menu-button:top-1.5',
-      "peer-data-[size=sm]/menu-button:top-1",
+        'peer-data-[size=lg]/menu-button:top-2.5',
-      "peer-data-[size=default]/menu-button:top-1.5",
+        'group-data-[collapsible=icon]:hidden',
-      "peer-data-[size=lg]/menu-button:top-2.5",
+        className,
-      "group-data-[collapsible=icon]:hidden",
+      )}
-      className
+      {...props}
-    )}
+    />
-    {...props}
+  ),
-  />
+)
-))
+SidebarMenuBadge.displayName = 'SidebarMenuBadge'
-SidebarMenuBadge.displayName = "SidebarMenuBadge"
 
 const SidebarMenuSkeleton = React.forwardRef<
   HTMLDivElement,
-  React.ComponentProps<"div"> & {
+  React.ComponentProps<'div'> & {
     showIcon?: boolean
   }
 >(({ className, showIcon = false, ...props }, ref) => {
@@ -669,61 +649,54 @@ const SidebarMenuSkeleton = React.forwardRef<
     <div
       ref={ref}
       data-sidebar="menu-skeleton"
-      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
       {...props}
     >
-      {showIcon && (
+      {showIcon && <Skeleton className="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />}
-        <Skeleton
-          className="size-4 rounded-md"
-          data-sidebar="menu-skeleton-icon"
-        />
-      )}
       <Skeleton
         className="h-4 max-w-[--skeleton-width] flex-1"
         data-sidebar="menu-skeleton-text"
         style={
           {
-            "--skeleton-width": width,
+            '--skeleton-width': width,
           } as React.CSSProperties
         }
       />
     </div>
   )
 })
-SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton"
+SidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton'
 
-const SidebarMenuSub = React.forwardRef<
+const SidebarMenuSub = React.forwardRef<HTMLUListElement, React.ComponentProps<'ul'>>(
-  HTMLUListElement,
+  ({ className, ...props }, ref) => (
-  React.ComponentProps<"ul">
+    <ul
->(({ className, ...props }, ref) => (
+      ref={ref}
-  <ul
+      data-sidebar="menu-sub"
-    ref={ref}
+      className={cn(
-    data-sidebar="menu-sub"
+        'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',
-    className={cn(
+        'group-data-[collapsible=icon]:hidden',
-      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
+        className,
-      "group-data-[collapsible=icon]:hidden",
+      )}
-      className
+      {...props}
-    )}
+    />
-    {...props}
+  ),
-  />
+)
-))
+SidebarMenuSub.displayName = 'SidebarMenuSub'
-SidebarMenuSub.displayName = "SidebarMenuSub"
 
-const SidebarMenuSubItem = React.forwardRef<
+const SidebarMenuSubItem = React.forwardRef<HTMLLIElement, React.ComponentProps<'li'>>(
-  HTMLLIElement,
+  ({ ...props }, ref) => <li ref={ref} {...props} />,
-  React.ComponentProps<"li">
+)
->(({ ...props }, ref) => <li ref={ref} {...props} />)
+SidebarMenuSubItem.displayName = 'SidebarMenuSubItem'
-SidebarMenuSubItem.displayName = "SidebarMenuSubItem"
 
 const SidebarMenuSubButton = React.forwardRef<
   HTMLAnchorElement,
-  React.ComponentProps<"a"> & {
+  React.ComponentProps<'a'> & {
     asChild?: boolean
-    size?: "sm" | "md"
+    size?: 'sm' | 'md'
     isActive?: boolean
   }
->(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
+>(({ asChild = false, size = 'md', isActive, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : "a"
+  const Comp = asChild ? Slot : 'a'
 
   return (
     <Comp
@@ -732,18 +705,18 @@ const SidebarMenuSubButton = React.forwardRef<
       data-size={size}
       data-active={isActive}
       className={cn(
-        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+        'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
-        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
-        size === "sm" && "text-xs",
+        size === 'sm' && 'text-xs',
-        size === "md" && "text-sm",
+        size === 'md' && 'text-sm',
-        "group-data-[collapsible=icon]:hidden",
+        'group-data-[collapsible=icon]:hidden',
-        className
+        className,
       )}
       {...props}
     />
   )
 })
-SidebarMenuSubButton.displayName = "SidebarMenuSubButton"
+SidebarMenuSubButton.displayName = 'SidebarMenuSubButton'
 
 export {
   Sidebar,

src/stores/index.ts

@@ -0,0 +1,23 @@
+import { create } from 'zustand'
+import { User, Tenant } from '@/payload-types'
+
+export type GlobalProps = {
+  user?: User,
+  tenant?: Tenant,
+}
+
+export type GlobalMethods = {
+  setUser: (user: User) => void,
+  setTenant: (tenant: Tenant) => void,
+}
+
+export type GlobalStore = GlobalProps & GlobalMethods
+
+const useGlobal = create<GlobalStore>((set, get) => ({
+  user: undefined,
+  setUser: (user: User) => set(() => ({ user: user })),
+  setTenant: (tenant: Tenant) => set(() => ({ tenant: tenant })),
+  tenant: undefined,
+}))
+
+export default useGlobal

tailwind.config.mjs

@@ -9,7 +9,7 @@ const config = {
     './app/**/*.{ts,tsx}',
     './src/**/*.{ts,tsx}',
   ],
-  darkMode: ['selector', '[data-theme="dark"]', 'class'],
+  darkMode: ['selector', '[data-theme="dark"]', 'class', '.dark'],
   plugins: [tailwindcssAnimate, typography],
   prefix: '',
   safelist: [
@@ -27,109 +27,105 @@ const config = {
     'bg-warning/30',
   ],
   theme: {
-  	container: {
+    container: {
-  		center: true,
+      center: true,
-  		padding: {
+      padding: {
-  			'2xl': '2rem',
+        '2xl': '2rem',
-  			DEFAULT: '1rem',
+        DEFAULT: '1rem',
-  			lg: '2rem',
+        lg: '2rem',
-  			md: '2rem',
+        md: '2rem',
-  			sm: '1rem',
+        sm: '1rem',
-  			xl: '2rem'
+        xl: '2rem',
-  		},
+      },
-  		screens: {
+      screens: {
-  			'2xl': '86rem',
+        '2xl': '86rem',
-  			lg: '64rem',
+        lg: '64rem',
-  			md: '48rem',
+        md: '48rem',
-  			sm: '40rem',
+        sm: '40rem',
-  			xl: '80rem'
+        xl: '80rem',
-  		}
+      },
-  	},
+    },
-  	extend: {
+    extend: {
-  		animation: {
+      animation: {
-  			'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-down': 'accordion-down 0.2s ease-out',
-  			'accordion-up': 'accordion-up 0.2s ease-out'
+        'accordion-up': 'accordion-up 0.2s ease-out',
-  		},
+      },
-  		borderRadius: {
+      borderRadius: {
-  			lg: 'var(--radius)',
+        lg: 'var(--radius)',
-  			md: 'calc(var(--radius) - 2px)',
+        md: 'calc(var(--radius) - 2px)',
-  			sm: 'calc(var(--radius) - 4px)'
+        sm: 'calc(var(--radius) - 4px)',
-  		},
+      },
-  		colors: {
+      colors: {
-  			accent: {
+        accent: {
-  				DEFAULT: 'hsl(var(--accent))',
+          DEFAULT: 'hsl(var(--accent))',
-  				foreground: 'hsl(var(--accent-foreground))'
+          foreground: 'hsl(var(--accent-foreground))',
-  			},
+        },
-  			background: 'hsl(var(--background))',
+        background: 'hsl(var(--background))',
-  			border: 'hsla(var(--border))',
+        border: 'hsla(var(--border))',
-  			card: {
+        card: {
-  				DEFAULT: 'hsl(var(--card))',
+          DEFAULT: 'hsl(var(--card))',
-  				foreground: 'hsl(var(--card-foreground))'
+          foreground: 'hsl(var(--card-foreground))',
-  			},
+        },
-  			destructive: {
+        destructive: {
-  				DEFAULT: 'hsl(var(--destructive))',
+          DEFAULT: 'hsl(var(--destructive))',
-  				foreground: 'hsl(var(--destructive-foreground))'
+          foreground: 'hsl(var(--destructive-foreground))',
-  			},
+        },
-  			foreground: 'hsl(var(--foreground))',
+        foreground: 'hsl(var(--foreground))',
-  			input: 'hsl(var(--input))',
+        input: 'hsl(var(--input))',
-  			muted: {
+        muted: {
-  				DEFAULT: 'hsl(var(--muted))',
+          DEFAULT: 'hsl(var(--muted))',
-  				foreground: 'hsl(var(--muted-foreground))'
+          foreground: 'hsl(var(--muted-foreground))',
-  			},
+        },
-  			popover: {
+        popover: {
-  				DEFAULT: 'hsl(var(--popover))',
+          DEFAULT: 'hsl(var(--popover))',
-  				foreground: 'hsl(var(--popover-foreground))'
+          foreground: 'hsl(var(--popover-foreground))',
-  			},
+        },
-  			primary: {
+        primary: {
-  				DEFAULT: 'hsl(var(--primary))',
+          DEFAULT: 'hsl(var(--primary))',
-  				foreground: 'hsl(var(--primary-foreground))'
+          foreground: 'hsl(var(--primary-foreground))',
-  			},
+        },
-  			ring: 'hsl(var(--ring))',
+        ring: 'hsl(var(--ring))',
-  			secondary: {
+        secondary: {
-  				DEFAULT: 'hsl(var(--secondary))',
+          DEFAULT: 'hsl(var(--secondary))',
-  				foreground: 'hsl(var(--secondary-foreground))'
+          foreground: 'hsl(var(--secondary-foreground))',
-  			},
+        },
-  			success: 'hsl(var(--success))',
+        success: 'hsl(var(--success))',
-  			error: 'hsl(var(--error))',
+        error: 'hsl(var(--error))',
-  			warning: 'hsl(var(--warning))',
+        warning: 'hsl(var(--warning))',
-  			sidebar: {
+        sidebar: {
-  				DEFAULT: 'hsl(var(--sidebar-background))',
+          DEFAULT: 'hsl(var(--sidebar-background))',
-  				foreground: 'hsl(var(--sidebar-foreground))',
+          foreground: 'hsl(var(--sidebar-foreground))',
-  				primary: 'hsl(var(--sidebar-primary))',
+          primary: 'hsl(var(--sidebar-primary))',
-  				'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
+          'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
-  				accent: 'hsl(var(--sidebar-accent))',
+          accent: 'hsl(var(--sidebar-accent))',
-  				'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
-  				border: 'hsl(var(--sidebar-border))',
+          border: 'hsl(var(--sidebar-border))',
-  				ring: 'hsl(var(--sidebar-ring))'
+          ring: 'hsl(var(--sidebar-ring))',
-  			}
+        },
-  		},
+      },
-  		fontFamily: {
+      fontFamily: {
-  			mono: [
+        mono: ['var(--font-geist-mono)'],
-  				'var(--font-geist-mono)'
+        sans: ['var(--font-geist-sans)'],
-  			],
+      },
-  			sans: [
+      keyframes: {
-  				'var(--font-geist-sans)'
+        'accordion-down': {
-  			]
+          from: {
-  		},
+            height: '0',
-  		keyframes: {
+          },
-  			'accordion-down': {
+          to: {
-  				from: {
+            height: 'var(--radix-accordion-content-height)',
-  					height: '0'
+          },
-  				},
+        },
-  				to: {
+        'accordion-up': {
-  					height: 'var(--radix-accordion-content-height)'
+          from: {
-  				}
+            height: 'var(--radix-accordion-content-height)',
-  			},
+          },
-  			'accordion-up': {
+          to: {
-  				from: {
+            height: '0',
-  					height: 'var(--radix-accordion-content-height)'
+          },
-  				},
+        },
-  				to: {
+      },
-  					height: '0'
+    },
-  				}
-  			}
-  		}
-  	}
   },
 }