sidebar-10.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sidebar-10",
  "title": "Sidebar 10",
  "description": "A sidebar in a popover.",
  "registryDependencies": [
    "sidebar",
    "breadcrumb",
    "separator",
    "popover",
    "collapsible",
    "dropdown-menu"
  ],
  "files": [
    {
      "path": "registry/base-mira/blocks/sidebar-10/page.tsx",
      "content": "import { AppSidebar } from \"@/registry/base-mira/blocks/sidebar-10/components/app-sidebar\"\nimport { NavActions } from \"@/registry/base-mira/blocks/sidebar-10/components/nav-actions\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/base-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"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-vertical:h-4 data-vertical:self-auto\"\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          <div className=\"ml-auto px-3\">\n            <NavActions />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 px-4 py-10\">\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-full w-full max-w-3xl rounded-xl\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/dashboard/page.tsx"
    },
    {
      "path": "registry/base-mira/blocks/sidebar-10/components/app-sidebar.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavFavorites } from \"@/registry/base-mira/blocks/sidebar-10/components/nav-favorites\"\nimport { NavMain } from \"@/registry/base-mira/blocks/sidebar-10/components/nav-main\"\nimport { NavSecondary } from \"@/registry/base-mira/blocks/sidebar-10/components/nav-secondary\"\nimport { NavWorkspaces } from \"@/registry/base-mira/blocks/sidebar-10/components/nav-workspaces\"\nimport { TeamSwitcher } from \"@/registry/base-mira/blocks/sidebar-10/components/team-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarHeader,\n  SidebarRail,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: (\n        <IconPlaceholder\n          lucide=\"TerminalIcon\"\n          tabler=\"IconCommand\"\n          hugeicons=\"CommandIcon\"\n          phosphor=\"CommandIcon\"\n          remixicon=\"RiCommandLine\"\n        />\n      ),\n      plan: \"Enterprise\",\n    },\n    {\n      name: \"Acme Corp.\",\n      logo: (\n        <IconPlaceholder\n          lucide=\"AudioLinesIcon\"\n          tabler=\"IconWaveSine\"\n          hugeicons=\"AudioWave01Icon\"\n          phosphor=\"WaveformIcon\"\n          remixicon=\"RiPulseLine\"\n        />\n      ),\n      plan: \"Startup\",\n    },\n    {\n      name: \"Evil Corp.\",\n      logo: (\n        <IconPlaceholder\n          lucide=\"TerminalIcon\"\n          tabler=\"IconCommand\"\n          hugeicons=\"CommandIcon\"\n          phosphor=\"CommandIcon\"\n          remixicon=\"RiCommandLine\"\n        />\n      ),\n      plan: \"Free\",\n    },\n  ],\n  navMain: [\n    {\n      title: \"Search\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SearchIcon\"\n          tabler=\"IconSearch\"\n          hugeicons=\"SearchIcon\"\n          phosphor=\"MagnifyingGlassIcon\"\n          remixicon=\"RiSearchLine\"\n        />\n      ),\n    },\n    {\n      title: \"Ask AI\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SparklesIcon\"\n          tabler=\"IconSparkles\"\n          hugeicons=\"SparklesIcon\"\n          phosphor=\"SparkleIcon\"\n          remixicon=\"RiSparklingLine\"\n        />\n      ),\n    },\n    {\n      title: \"Home\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"HomeIcon\"\n          tabler=\"IconHome\"\n          hugeicons=\"HomeIcon\"\n          phosphor=\"HouseIcon\"\n          remixicon=\"RiHomeLine\"\n        />\n      ),\n      isActive: true,\n    },\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"InboxIcon\"\n          tabler=\"IconInbox\"\n          hugeicons=\"InboxIcon\"\n          phosphor=\"TrayIcon\"\n          remixicon=\"RiInboxLine\"\n        />\n      ),\n      badge: \"10\",\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Calendar\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CalendarIcon\"\n          tabler=\"IconCalendar\"\n          hugeicons=\"CalendarIcon\"\n          phosphor=\"CalendarIcon\"\n          remixicon=\"RiCalendarLine\"\n        />\n      ),\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n    {\n      title: \"Templates\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BlocksIcon\"\n          tabler=\"IconCube\"\n          hugeicons=\"CubeIcon\"\n          phosphor=\"CubeIcon\"\n          remixicon=\"RiBox3Line\"\n        />\n      ),\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n    {\n      title: \"Help\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MessageCircleQuestionIcon\"\n          tabler=\"IconMessageQuestion\"\n          hugeicons=\"MessageQuestionIcon\"\n          phosphor=\"ChatCircleIcon\"\n          remixicon=\"RiQuestionLine\"\n        />\n      ),\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 AppSidebar({ ...props }: 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/base-mira/blocks/sidebar-10/components/nav-actions.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-mira/ui/popover\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n  [\n    {\n      label: \"Customize Page\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n    {\n      label: \"Turn into wiki\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileTextIcon\"\n          tabler=\"IconFileText\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileTextIcon\"\n          remixicon=\"RiFileTextLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Copy Link\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LinkIcon\"\n          tabler=\"IconLink\"\n          hugeicons=\"LinkIcon\"\n          phosphor=\"LinkIcon\"\n          remixicon=\"RiLinksLine\"\n        />\n      ),\n    },\n    {\n      label: \"Duplicate\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CopyIcon\"\n          tabler=\"IconCopy\"\n          hugeicons=\"Copy01Icon\"\n          phosphor=\"CopyIcon\"\n          remixicon=\"RiFileCopyLine\"\n        />\n      ),\n    },\n    {\n      label: \"Move to\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CornerUpRightIcon\"\n          tabler=\"IconCornerUpRight\"\n          hugeicons=\"RedoIcon\"\n          phosphor=\"ArrowBendUpRightIcon\"\n          remixicon=\"RiCornerUpRightLine\"\n        />\n      ),\n    },\n    {\n      label: \"Move to Trash\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Undo\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CornerUpLeftIcon\"\n          tabler=\"IconCornerUpLeft\"\n          hugeicons=\"UndoIcon\"\n          phosphor=\"ArrowBendUpLeftIcon\"\n          remixicon=\"RiCornerUpLeftLine\"\n        />\n      ),\n    },\n    {\n      label: \"View analytics\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ChartLineIcon\"\n          tabler=\"IconChartLine\"\n          hugeicons=\"ChartIcon\"\n          phosphor=\"ChartLineIcon\"\n          remixicon=\"RiLineChartLine\"\n        />\n      ),\n    },\n    {\n      label: \"Version History\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"GalleryVerticalEndIcon\"\n          tabler=\"IconLayoutRows\"\n          hugeicons=\"LayoutBottomIcon\"\n          phosphor=\"RowsIcon\"\n          remixicon=\"RiGalleryLine\"\n        />\n      ),\n    },\n    {\n      label: \"Show delete pages\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TrashIcon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"DeleteIcon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n    {\n      label: \"Notifications\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BellIcon\"\n          tabler=\"IconBell\"\n          hugeicons=\"NotificationIcon\"\n          phosphor=\"BellIcon\"\n          remixicon=\"RiNotificationLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Import\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArrowUpIcon\"\n          tabler=\"IconArrowUp\"\n          hugeicons=\"ArrowUpIcon\"\n          phosphor=\"ArrowUpIcon\"\n          remixicon=\"RiArrowUpLine\"\n        />\n      ),\n    },\n    {\n      label: \"Export\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArrowDownIcon\"\n          tabler=\"IconArrowDown\"\n          hugeicons=\"ArrowDownIcon\"\n          phosphor=\"ArrowDownIcon\"\n          remixicon=\"RiArrowDownLine\"\n        />\n      ),\n    },\n  ],\n]\nexport function NavActions() {\n  const [isOpen, setIsOpen] = React.useState(false)\n  React.useEffect(() => {\n    setIsOpen(true)\n  }, [])\n  return (\n    <div className=\"flex items-center gap-2 text-sm\">\n      <div className=\"text-muted-foreground hidden font-medium md:inline-block\">\n        Edit Oct 08\n      </div>\n      <Button variant=\"ghost\" size=\"icon\" className=\"h-7 w-7\">\n        <IconPlaceholder\n          lucide=\"StarIcon\"\n          tabler=\"IconStar\"\n          hugeicons=\"StarIcon\"\n          phosphor=\"StarIcon\"\n          remixicon=\"RiStarLine\"\n        />\n      </Button>\n      <Popover open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverTrigger\n          render={\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"data-open:bg-accent h-7 w-7\"\n            />\n          }\n        >\n          <IconPlaceholder\n            lucide=\"MoreHorizontalIcon\"\n            tabler=\"IconDots\"\n            hugeicons=\"MoreHorizontalCircle01Icon\"\n            phosphor=\"DotsThreeOutlineIcon\"\n            remixicon=\"RiMoreLine\"\n          />\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-56 overflow-hidden rounded-lg p-0\"\n          align=\"end\"\n        >\n          <Sidebar collapsible=\"none\" className=\"bg-transparent\">\n            <SidebarContent>\n              {data.map((group, index) => (\n                <SidebarGroup key={index} className=\"border-b last:border-none\">\n                  <SidebarGroupContent className=\"gap-0\">\n                    <SidebarMenu>\n                      {group.map((item, index) => (\n                        <SidebarMenuItem key={index}>\n                          <SidebarMenuButton>\n                            {item.icon} <span>{item.label}</span>\n                          </SidebarMenuButton>\n                        </SidebarMenuItem>\n                      ))}\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </SidebarGroup>\n              ))}\n            </SidebarContent>\n          </Sidebar>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-mira/blocks/sidebar-10/components/nav-favorites.tsx",
      "content": "\"use client\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\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  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 render={<a href={item.url} title={item.name} />}>\n              <span>{item.emoji}</span>\n              <span>{item.name}</span>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={\n                  <SidebarMenuAction\n                    showOnHover\n                    className=\"aria-expanded:bg-muted\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"MoreHorizontalIcon\"\n                  tabler=\"IconDots\"\n                  hugeicons=\"MoreHorizontalCircle01Icon\"\n                  phosphor=\"DotsThreeOutlineIcon\"\n                  remixicon=\"RiMoreLine\"\n                />\n                <span className=\"sr-only\">More</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-56 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"StarOffIcon\"\n                      tabler=\"IconStarOff\"\n                      hugeicons=\"StarOffIcon\"\n                      phosphor=\"StarIcon\"\n                      remixicon=\"RiStarOffLine\"\n                      className=\"text-muted-foreground\"\n                    />\n                    <span>Remove from Favorites</span>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"LinkIcon\"\n                      tabler=\"IconLink\"\n                      hugeicons=\"LinkIcon\"\n                      phosphor=\"LinkIcon\"\n                      remixicon=\"RiLinksLine\"\n                      className=\"text-muted-foreground\"\n                    />\n                    <span>Copy Link</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ArrowUpRightIcon\"\n                      tabler=\"IconArrowUpRight\"\n                      hugeicons=\"ArrowUpRightIcon\"\n                      phosphor=\"ArrowUpRightIcon\"\n                      remixicon=\"RiArrowRightUpLine\"\n                      className=\"text-muted-foreground\"\n                    />\n                    <span>Open in New Tab</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"Trash2Icon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"Delete02Icon\"\n                      phosphor=\"TrashIcon\"\n                      remixicon=\"RiDeleteBinLine\"\n                      className=\"text-muted-foreground\"\n                    />\n                    <span>Delete</span>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <IconPlaceholder\n              lucide=\"MoreHorizontalIcon\"\n              tabler=\"IconDots\"\n              hugeicons=\"MoreHorizontalCircle01Icon\"\n              phosphor=\"DotsThreeOutlineIcon\"\n              remixicon=\"RiMoreLine\"\n            />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-mira/blocks/sidebar-10/components/nav-main.tsx",
      "content": "\"use client\"\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-mira/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: React.ReactNode\n    isActive?: boolean\n  }[]\n}) {\n  return (\n    <SidebarMenu>\n      {items.map((item) => (\n        <SidebarMenuItem key={item.title}>\n          <SidebarMenuButton\n            isActive={item.isActive}\n            render={<a href={item.url} />}\n          >\n            {item.icon}\n            <span>{item.title}</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      ))}\n    </SidebarMenu>\n  )\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-mira/blocks/sidebar-10/components/nav-secondary.tsx",
      "content": "\"use client\"\n\nimport React from \"react\"\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-mira/ui/sidebar\"\n\nexport function NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: React.ReactNode\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 render={<a href={item.url} />}>\n                {item.icon}\n                <span>{item.title}</span>\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/base-mira/blocks/sidebar-10/components/nav-workspaces.tsx",
      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-mira/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/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\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 render={<a href=\"#\" />}>\n                  <span>{workspace.emoji}</span>\n                  <span>{workspace.name}</span>\n                </SidebarMenuButton>\n                <SidebarMenuAction\n                  render={<CollapsibleTrigger />}\n                  className=\"bg-sidebar-accent text-sidebar-accent-foreground left-2 data-open:rotate-90\"\n                  showOnHover\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </SidebarMenuAction>\n                <SidebarMenuAction showOnHover>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton render={<a href=\"#\" />}>\n                          <span>{page.emoji}</span>\n                          <span>{page.name}</span>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-mira/blocks/sidebar-10/components/team-switcher.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n  if (!activeTeam) {\n    return null\n  }\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<SidebarMenuButton className=\"w-fit px-1.5\" />}\n          >\n            <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md\">\n              {activeTeam.logo}\n            </div>\n            <span className=\"truncate font-medium\">{activeTeam.name}</span>\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className=\"opacity-50\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\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}\n                  </div>\n                  {team.name}\n                  <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem className=\"gap-2 p-2\">\n                <div className=\"bg-background flex size-6 items-center justify-center rounded-md border\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground font-medium\">\n                  Add team\n                </div>\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "sidebar",
    "dashboard"
  ],
  "type": "registry:block"
}