sidebar-07.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sidebar-07",
  "title": "Sidebar 07",
  "description": "A sidebar that collapses to icons.",
  "registryDependencies": [
    "sidebar",
    "breadcrumb",
    "separator",
    "collapsible",
    "dropdown-menu",
    "avatar"
  ],
  "files": [
    {
      "path": "registry/base-mira/blocks/sidebar-07/page.tsx",
      "content": "import { AppSidebar } from \"@/registry/base-mira/blocks/sidebar-07/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\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-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/dashboard/page.tsx"
    },
    {
      "path": "registry/base-mira/blocks/sidebar-07/components/app-sidebar.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/base-mira/blocks/sidebar-07/components/nav-main\"\nimport { NavProjects } from \"@/registry/base-mira/blocks/sidebar-07/components/nav-projects\"\nimport { NavUser } from \"@/registry/base-mira/blocks/sidebar-07/components/nav-user\"\nimport { TeamSwitcher } from \"@/registry/base-mira/blocks/sidebar-07/components/team-switcher\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\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  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  teams: [\n    {\n      name: \"Acme Inc\",\n      logo: (\n        <IconPlaceholder\n          lucide=\"GalleryVerticalEndIcon\"\n          tabler=\"IconLayoutRows\"\n          hugeicons=\"LayoutBottomIcon\"\n          phosphor=\"RowsIcon\"\n          remixicon=\"RiGalleryLine\"\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: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\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      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar collapsible=\"icon\" {...props}>\n      <SidebarHeader>\n        <TeamSwitcher teams={data.teams} />\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-mira/blocks/sidebar-07/components/nav-main.tsx",
      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-mira/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\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 NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: React.ReactNode\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <Collapsible\n            key={item.title}\n            defaultOpen={item.isActive}\n            className=\"group/collapsible\"\n            render={<SidebarMenuItem />}\n          >\n            <CollapsibleTrigger\n              render={<SidebarMenuButton tooltip={item.title} />}\n            >\n              {item.icon}\n              <span>{item.title}</span>\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                phosphor=\"CaretRightIcon\"\n                remixicon=\"RiArrowRightSLine\"\n                className=\"ml-auto transition-transform duration-200 group-data-open/collapsible:rotate-90\"\n              />\n            </CollapsibleTrigger>\n            <CollapsibleContent>\n              <SidebarMenuSub>\n                {item.items?.map((subItem) => (\n                  <SidebarMenuSubItem key={subItem.title}>\n                    <SidebarMenuSubButton render={<a href={subItem.url} />}>\n                      <span>{subItem.title}</span>\n                    </SidebarMenuSubButton>\n                  </SidebarMenuSubItem>\n                ))}\n              </SidebarMenuSub>\n            </CollapsibleContent>\n          </Collapsible>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-mira/blocks/sidebar-07/components/nav-projects.tsx",
      "content": "\"use client\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\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 NavProjects({\n  projects,\n}: {\n  projects: {\n    name: string\n    url: string\n    icon: React.ReactNode\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Projects</SidebarGroupLabel>\n      <SidebarMenu>\n        {projects.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton render={<a href={item.url} />}>\n              {item.icon}\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-48 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                  <span>View Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowForward\"\n                    hugeicons=\"ArrowRightIcon\"\n                    phosphor=\"ShareFatIcon\"\n                    remixicon=\"RiShareForwardLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                  <span>Share Project</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 Project</span>\n                </DropdownMenuItem>\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              className=\"text-sidebar-foreground/70\"\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-07/components/nav-user.tsx",
      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-mira/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\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  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton size=\"lg\" className=\"aria-expanded:bg-muted\" />\n            }\n          >\n            <Avatar>\n              <AvatarImage src={user.avatar} alt={user.name} />\n              <AvatarFallback>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            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto size-4\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\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>\n                    <AvatarImage src={user.avatar} alt={user.name} />\n                    <AvatarFallback>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            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                  remixicon=\"RiSparklingLine\"\n                />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BadgeCheckIcon\"\n                  tabler=\"IconRosetteDiscountCheck\"\n                  hugeicons=\"CheckmarkBadgeIcon\"\n                  phosphor=\"CheckCircleIcon\"\n                  remixicon=\"RiCheckboxCircleLine\"\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BellIcon\"\n                  tabler=\"IconBell\"\n                  hugeicons=\"NotificationIcon\"\n                  phosphor=\"BellIcon\"\n                  remixicon=\"RiNotificationLine\"\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-mira/blocks/sidebar-07/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  useSidebar,\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 { isMobile } = useSidebar()\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={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n              />\n            }\n          >\n            <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n              {activeTeam.logo}\n            </div>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-medium\">{activeTeam.name}</span>\n              <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"min-w-56 rounded-lg\"\n            align=\"start\"\n            side={isMobile ? \"bottom\" : \"right\"}\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-md 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=\"flex size-6 items-center justify-center rounded-md border bg-transparent\">\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"
}