{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "v0-sidebar-15", "type": "registry:internal", "author": "shadcn (https://ui.shadcn.com)", "registryDependencies": [ "sidebar", "breadcrumb", "separator", "popover", "collapsible", "dropdown-menu", "calendar", "avatar" ], "files": [ { "path": "internal/sidebar-15.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n ArrowUpRight,\n AudioWaveform,\n BadgeCheck,\n Bell,\n Blocks,\n CalendarIcon,\n Check,\n ChevronDown,\n ChevronRight,\n ChevronsUpDown,\n Command,\n CreditCard,\n Home,\n Inbox,\n Link,\n LogOut,\n MessageCircleQuestion,\n MoreHorizontal,\n Plus,\n Search,\n Settings2,\n Sparkles,\n StarOff,\n Trash2,\n type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/components/ui/avatar\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbList,\n BreadcrumbPage,\n} from \"@/components/ui/breadcrumb\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarInset,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuBadge,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n SidebarProvider,\n SidebarRail,\n SidebarSeparator,\n SidebarTrigger,\n useSidebar,\n} from \"@/components/ui/sidebar\"\n// This is sample data.\nconst sidebarLeftData = {\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: CalendarIcon,\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\n// This is sample data.\nconst sidebarRightData = {\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 default function Page() {\n return (\n \n \n \n

\n \n \n \n \n \n \n Project Management & Task Tracking\n \n \n \n \n

\n \n \n \n )\n}\n\nfunction SidebarLeft({ ...props }: React.ComponentProps) {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction SidebarRight({ ...props }: React.ComponentProps) {\n return (\n

\n {item}\n \n \n ))}\n \n \n \n \n \n \n \n ))}\n \n )\n}\n\nfunction DatePicker() {\n return (\n \n \n \n \n \n )\n}\n\nfunction 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 \n Favorites\n \n {favorites.map((item) => (\n \n \n \n {item.emoji}\n {item.name}\n \n \n \n \n \n \n More\n \n \n \n \n \n Remove from Favorites\n \n \n \n \n Copy Link\n \n \n \n Open in New Tab\n \n \n \n \n Delete\n \n \n \n \n ))}\n \n \n \n More\n \n \n \n \n )\n}\n\nfunction NavMain({\n items,\n}: {\n items: {\n title: string\n url: string\n icon: LucideIcon\n isActive?: boolean\n }[]\n}) {\n return (\n \n {items.map((item) => (\n \n \n \n \n {item.title}\n \n \n \n ))}\n \n )\n}\n\nfunction 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) {\n return (\n \n \n \n {items.map((item) => (\n \n \n \n \n {item.title}\n \n \n {item.badge && {item.badge}}\n \n ))}\n \n \n \n )\n}\n\nfunction 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 \n \n \n \n \n \n \n CN\n \n

\n {user.name}\n {user.email}\n

\n \n \n \n \n \n

\n \n \n CN\n \n

\n {user.name}\n {user.email}\n

\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n\nfunction 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 \n Workspaces\n \n \n {workspaces.map((workspace) => (\n \n \n \n \n {workspace.emoji}\n {workspace.name}\n \n \n \n \n \n \n \n \n \n \n \n \n {workspace.pages.map((page) => (\n \n \n \n {page.emoji}\n {page.name}\n \n \n \n ))}\n \n \n \n \n ))}\n \n \n \n More\n \n \n \n \n \n )\n}\n\nfunction 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 \n \n \n \n \n

\n \n

\n {activeTeam.name}\n \n \n \n \n \n Teams\n \n {teams.map((team, index) => (\n setActiveTeam(team)}\n className=\"gap-2 p-2\"\n >\n

\n \n

\n {team.name}\n ⌘{index + 1}\n \n ))}\n \n \n

\n \n

Add team

\n \n \n \n \n \n )\n}\n", "type": "registry:internal", "target": "" } ] }