sidebar-15.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sidebar-15",
  "type": "registry:block",
  "description": "A left and right sidebar.",
  "registryDependencies": [
    "sidebar",
    "breadcrumb",
    "separator",
    "popover",
    "collapsible",
    "dropdown-menu",
    "calendar",
    "avatar"
  ],
  "files": [
    {
      "path": "registry/new-york-v4/blocks/sidebar-15/page.tsx",
      "content": "import { SidebarLeft } from \"@/registry/new-york-v4/blocks/sidebar-15/components/sidebar-left\"\nimport { SidebarRight } from \"@/registry/new-york-v4/blocks/sidebar-15/components/sidebar-right\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarLeft />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-[orientation=vertical]:h-4\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"bg-muted/50 mx-auto h-24 w-full max-w-3xl rounded-xl\" />\n          <div className=\"bg-muted/50 mx-auto h-[100vh] w-full max-w-3xl rounded-xl\" />\n        </div>\n      </SidebarInset>\n      <SidebarRight />\n    </SidebarProvider>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/dashboard/page.tsx"
    },
    {
      "path": "registry/new-york-v4/blocks/sidebar-15/components/calendars.tsx",
      "content": "import * as React from \"react\"\nimport { Check, ChevronRight } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york-v4/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name} className=\"py-0\">\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-xs border\"\n                          >\n                            <Check className=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/new-york-v4/blocks/sidebar-15/components/date-picker.tsx",
      "content": "import { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function DatePicker() {\n  return (\n    <SidebarGroup className=\"px-0\">\n      <SidebarGroupContent>\n        <Calendar className=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/new-york-v4/blocks/sidebar-15/components/nav-favorites.tsx",
      "content": "\"use client\"\n\nimport {\n  ArrowUpRight,\n  Link,\n  MoreHorizontal,\n  StarOff,\n  Trash2,\n} from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavFavorites({\n  favorites,\n}: {\n  favorites: {\n    name: string\n    url: string\n    emoji: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Favorites</SidebarGroupLabel>\n      <SidebarMenu>\n        {favorites.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url} title={item.name}>\n                <span>{item.emoji}</span>\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction showOnHover>\n                  <MoreHorizontal />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-56 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <StarOff className=\"text-muted-foreground\" />\n                  <span>Remove from Favorites</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Link className=\"text-muted-foreground\" />\n                  <span>Copy Link</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <ArrowUpRight className=\"text-muted-foreground\" />\n                  <span>Open in New Tab</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <Trash2 className=\"text-muted-foreground\" />\n                  <span>Delete</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <MoreHorizontal />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/new-york-v4/blocks/sidebar-15/components/nav-main.tsx",
      "content": "\"use client\"\n\nimport { type LucideIcon } from \"lucide-react\"\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    isActive?: boolean\n  }[]\n}) {\n  return (\n    <SidebarMenu>\n      {items.map((item) => (\n        <SidebarMenuItem key={item.title}>\n          <SidebarMenuButton asChild isActive={item.isActive}>\n            <a href={item.url}>\n              <item.icon />\n              <span>{item.title}</span>\n            </a>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      ))}\n    </SidebarMenu>\n  )\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/new-york-v4/blocks/sidebar-15/components/nav-secondary.tsx",
      "content": "import React from \"react\"\nimport { type LucideIcon } from \"lucide-react\"\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: LucideIcon\n    badge?: React.ReactNode\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton asChild>\n                <a href={item.url}>\n                  <item.icon />\n                  <span>{item.title}</span>\n                </a>\n              </SidebarMenuButton>\n              {item.badge && <SidebarMenuBadge>{item.badge}</SidebarMenuBadge>}\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/new-york-v4/blocks/sidebar-15/components/nav-user.tsx",
      "content": "\"use client\"\n\nimport {\n  BadgeCheck,\n  Bell,\n  ChevronsUpDown,\n  CreditCard,\n  LogOut,\n  Sparkles,\n} from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york-v4/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{user.name}</span>\n                <span className=\"truncate text-xs\">{user.email}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"start\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <Sparkles />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <BadgeCheck />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <CreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <Bell />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <LogOut />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/new-york-v4/blocks/sidebar-15/components/nav-workspaces.tsx",
      "content": "import { ChevronRight, MoreHorizontal, Plus } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york-v4/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"bg-sidebar-accent text-sidebar-accent-foreground left-2 data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <ChevronRight />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <Plus />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <MoreHorizontal />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/new-york-v4/blocks/sidebar-15/components/sidebar-left.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  AudioWaveform,\n  Blocks,\n  Calendar,\n  Command,\n  Home,\n  Inbox,\n  MessageCircleQuestion,\n  Search,\n  Settings2,\n  Sparkles,\n  Trash2,\n} from \"lucide-react\"\n\nimport { NavFavorites } from \"@/registry/new-york-v4/blocks/sidebar-15/components/nav-favorites\"\nimport { NavMain } from \"@/registry/new-york-v4/blocks/sidebar-15/components/nav-main\"\nimport { NavSecondary } from \"@/registry/new-york-v4/blocks/sidebar-15/components/nav-secondary\"\nimport { NavWorkspaces } from \"@/registry/new-york-v4/blocks/sidebar-15/components/nav-workspaces\"\nimport { TeamSwitcher } from \"@/registry/new-york-v4/blocks/sidebar-15/components/team-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarHeader,\n  SidebarRail,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: Command,\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: AudioWaveform,\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: Command,\n      plan: \"Free\",\n    },\n  ],\n  navMain: [\n    {\n      title: \"Search\",\n      url: \"#\",\n      icon: Search,\n    },\n    {\n      title: \"Ask AI\",\n      url: \"#\",\n      icon: Sparkles,\n    },\n    {\n      title: \"Home\",\n      url: \"#\",\n      icon: Home,\n      isActive: true,\n    },\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: Inbox,\n      badge: \"10\",\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Calendar\",\n      url: \"#\",\n      icon: Calendar,\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n    },\n    {\n      title: \"Templates\",\n      url: \"#\",\n      icon: Blocks,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: Trash2,\n    },\n    {\n      title: \"Help\",\n      url: \"#\",\n      icon: MessageCircleQuestion,\n    },\n  ],\n  favorites: [\n    {\n      name: \"Project Management & Task Tracking\",\n      url: \"#\",\n      emoji: \"📊\",\n    },\n    {\n      name: \"Family Recipe Collection & Meal Planning\",\n      url: \"#\",\n      emoji: \"🍳\",\n    },\n    {\n      name: \"Fitness Tracker & Workout Routines\",\n      url: \"#\",\n      emoji: \"💪\",\n    },\n    {\n      name: \"Book Notes & Reading List\",\n      url: \"#\",\n      emoji: \"📚\",\n    },\n    {\n      name: \"Sustainable Gardening Tips & Plant Care\",\n      url: \"#\",\n      emoji: \"🌱\",\n    },\n    {\n      name: \"Language Learning Progress & Resources\",\n      url: \"#\",\n      emoji: \"🗣️\",\n    },\n    {\n      name: \"Home Renovation Ideas & Budget Tracker\",\n      url: \"#\",\n      emoji: \"🏠\",\n    },\n    {\n      name: \"Personal Finance & Investment Portfolio\",\n      url: \"#\",\n      emoji: \"💰\",\n    },\n    {\n      name: \"Movie & TV Show Watchlist with Reviews\",\n      url: \"#\",\n      emoji: \"🎬\",\n    },\n    {\n      name: \"Daily Habit Tracker & Goal Setting\",\n      url: \"#\",\n      emoji: \"✅\",\n    },\n  ],\n  workspaces: [\n    {\n      name: \"Personal Life Management\",\n      emoji: \"🏠\",\n      pages: [\n        {\n          name: \"Daily Journal & Reflection\",\n          url: \"#\",\n          emoji: \"📔\",\n        },\n        {\n          name: \"Health & Wellness Tracker\",\n          url: \"#\",\n          emoji: \"🍏\",\n        },\n        {\n          name: \"Personal Growth & Learning Goals\",\n          url: \"#\",\n          emoji: \"🌟\",\n        },\n      ],\n    },\n    {\n      name: \"Professional Development\",\n      emoji: \"💼\",\n      pages: [\n        {\n          name: \"Career Objectives & Milestones\",\n          url: \"#\",\n          emoji: \"🎯\",\n        },\n        {\n          name: \"Skill Acquisition & Training Log\",\n          url: \"#\",\n          emoji: \"🧠\",\n        },\n        {\n          name: \"Networking Contacts & Events\",\n          url: \"#\",\n          emoji: \"🤝\",\n        },\n      ],\n    },\n    {\n      name: \"Creative Projects\",\n      emoji: \"🎨\",\n      pages: [\n        {\n          name: \"Writing Ideas & Story Outlines\",\n          url: \"#\",\n          emoji: \"✍️\",\n        },\n        {\n          name: \"Art & Design Portfolio\",\n          url: \"#\",\n          emoji: \"🖼️\",\n        },\n        {\n          name: \"Music Composition & Practice Log\",\n          url: \"#\",\n          emoji: \"🎵\",\n        },\n      ],\n    },\n    {\n      name: \"Home Management\",\n      emoji: \"🏡\",\n      pages: [\n        {\n          name: \"Household Budget & Expense Tracking\",\n          url: \"#\",\n          emoji: \"💰\",\n        },\n        {\n          name: \"Home Maintenance Schedule & Tasks\",\n          url: \"#\",\n          emoji: \"🔧\",\n        },\n        {\n          name: \"Family Calendar & Event Planning\",\n          url: \"#\",\n          emoji: \"📅\",\n        },\n      ],\n    },\n    {\n      name: \"Travel & Adventure\",\n      emoji: \"🧳\",\n      pages: [\n        {\n          name: \"Trip Planning & Itineraries\",\n          url: \"#\",\n          emoji: \"🗺️\",\n        },\n        {\n          name: \"Travel Bucket List & Inspiration\",\n          url: \"#\",\n          emoji: \"🌎\",\n        },\n        {\n          name: \"Travel Journal & Photo Gallery\",\n          url: \"#\",\n          emoji: \"📸\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function SidebarLeft({\n  ...props\n}: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar className=\"border-r-0\" {...props}>\n      <SidebarHeader>\n        <TeamSwitcher teams={data.teams} />\n        <NavMain items={data.navMain} />\n      </SidebarHeader>\n      <SidebarContent>\n        <NavFavorites favorites={data.favorites} />\n        <NavWorkspaces workspaces={data.workspaces} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/new-york-v4/blocks/sidebar-15/components/sidebar-right.tsx",
      "content": "import * as React from \"react\"\nimport { Plus } from \"lucide-react\"\n\nimport { Calendars } from \"@/registry/new-york-v4/blocks/sidebar-15/components/calendars\"\nimport { DatePicker } from \"@/registry/new-york-v4/blocks/sidebar-15/components/date-picker\"\nimport { NavUser } from \"@/registry/new-york-v4/blocks/sidebar-15/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function SidebarRight({\n  ...props\n}: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      collapsible=\"none\"\n      className=\"sticky top-0 hidden h-svh border-l lg:flex\"\n      {...props}\n    >\n      <SidebarHeader className=\"border-sidebar-border h-16 border-b\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <Plus />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/new-york-v4/blocks/sidebar-15/components/team-switcher.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDown, Plus } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ElementType\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md\">\n                <activeTeam.logo className=\"size-3\" />\n              </div>\n              <span className=\"truncate font-medium\">{activeTeam.name}</span>\n              <ChevronDown className=\"opacity-50\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                  <team.logo className=\"size-4 shrink-0\" />\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"bg-background flex size-6 items-center justify-center rounded-md border\">\n                <Plus className=\"size-4\" />\n              </div>\n              <div className=\"text-muted-foreground font-medium\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "sidebar",
    "dashboard"
  ]
}