{"$schema":"https://ui.shadcn.com/schema/registry-item.json","type":"registry:block","registryDependencies":["@efferd/use-keypress","avatar","breadcrumb","button","dropdown-menu","input-group","kbd","separator","sidebar","tooltip","@efferd/logo"],"name":"app-shell-5","description":"Sidebar workspace with command-style search, custom trigger and theme controls, navbar strip, and latest-change row.","dependencies":["next-themes"],"categories":["app-shell"],"files":[{"path":"registry/blocks/app-shell/5/app-header.tsx","type":"registry:component","content":"import {\n\tBreadcrumb,\n\tBreadcrumbItem,\n\tBreadcrumbList,\n\tBreadcrumbPage,\n} from \"@/components/ui/breadcrumb\";\nimport { Button } from \"@/components/ui/button\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { navLinks } from \"@/components/app-shared\";\nimport { CustomTrigger } from \"@/components/custom-trigger\";\nimport { NavUser } from \"@/components/nav-user\";\n\nexport function AppHeader() {\n\tconst activeItem = navLinks.find((item) => item.isActive);\n\n\treturn (\n\t\t<header className=\"sticky top-0 z-50 flex h-(--app-header-height) w-full shrink-0 items-center justify-between gap-2 border-b bg-background px-4 md:px-6\">\n\t\t\t<div className=\"flex items-center gap-3\">\n\t\t\t\t<CustomTrigger place=\"navbar\" />\n\t\t\t</div>\n\t\t\t<Breadcrumb>\n\t\t\t\t<BreadcrumbList>\n\t\t\t\t\t<BreadcrumbItem>\n\t\t\t\t\t\t<BreadcrumbPage>{activeItem?.title}</BreadcrumbPage>\n\t\t\t\t\t</BreadcrumbItem>\n\t\t\t\t</BreadcrumbList>\n\t\t\t</Breadcrumb>{\" \"}\n\t\t\t<div className=\"flex items-center gap-3\">\n\t\t\t\t<Button size=\"icon-sm\" variant=\"outline\">\n\t\t\t\t\t<IconPlaceholder\n\t\t\t\t\t\thugeicons=\"HelpCircleIcon\"\n\t\t\t\t\t\tlucide=\"HelpCircleIcon\"\n\t\t\t\t\t\tphosphor=\"QuestionIcon\"\n\t\t\t\t\t\tremixicon=\"RiQuestionLine\"\n\t\t\t\t\t\ttabler=\"IconHelpCircle\"\n\t\t\t\t\t/>\n\t\t\t\t</Button>\n\t\t\t\t<Button aria-label=\"Notifications\" size=\"icon-sm\" variant=\"outline\">\n\t\t\t\t\t<IconPlaceholder\n\t\t\t\t\t\thugeicons=\"Notification03Icon\"\n\t\t\t\t\t\tlucide=\"BellIcon\"\n\t\t\t\t\t\tphosphor=\"BellIcon\"\n\t\t\t\t\t\tremixicon=\"RiNotification3Line\"\n\t\t\t\t\t\ttabler=\"IconBell\"\n\t\t\t\t\t/>\n\t\t\t\t</Button>\n\t\t\t\t<Separator\n\t\t\t\t\tclassName=\"h-4 data-[orientation=vertical]:self-center\"\n\t\t\t\t\torientation=\"vertical\"\n\t\t\t\t/>\n\t\t\t\t<NavUser />\n\t\t\t</div>\n\t\t</header>\n\t);\n}\n"},{"path":"registry/blocks/app-shell/5/app-shared.tsx","type":"registry:component","content":"import type { ReactNode } from \"react\";\n\nexport type SidebarNavItem = {\n\ttitle: string;\n\tpath?: string;\n\ticon?: ReactNode;\n\tisActive?: boolean;\n\tsubItems?: SidebarNavItem[];\n};\n\nexport type SidebarNavGroup = {\n\tlabel: string;\n\titems: SidebarNavItem[];\n};\n\nexport const navGroups: SidebarNavGroup[] = [\n\t{\n\t\tlabel: \"Explore\",\n\t\titems: [\n\t\t\t{\n\t\t\t\ttitle: \"Dashboard\",\n\t\t\t\tpath: \"#/overview\",\n\t\t\t\ticon: (\n\t\t\t\t\t<IconPlaceholder\n\t\t\t\t\t\thugeicons=\"DashboardSquare01Icon\"\n\t\t\t\t\t\tlucide=\"LayoutDashboardIcon\"\n\t\t\t\t\t\tphosphor=\"SquaresFourIcon\"\n\t\t\t\t\t\tremixicon=\"RiDashboardLine\"\n\t\t\t\t\t\ttabler=\"IconLayoutDashboard\"\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t\tisActive: true,\n\t\t\t},\n\t\t\t{\n\t\t\t\ttitle: \"Events\",\n\t\t\t\tpath: \"#/events\",\n\t\t\t\ticon: (\n\t\t\t\t\t<IconPlaceholder\n\t\t\t\t\t\thugeicons=\"Cursor02Icon\"\n\t\t\t\t\t\tlucide=\"MousePointerClickIcon\"\n\t\t\t\t\t\tphosphor=\"CursorClickIcon\"\n\t\t\t\t\t\tremixicon=\"RiCursorLine\"\n\t\t\t\t\t\ttabler=\"IconPointer\"\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t},\n\t\t\t{\n\t\t\t\ttitle: \"Funnels\",\n\t\t\t\tpath: \"#/funnels\",\n\t\t\t\ticon: (\n\t\t\t\t\t<IconPlaceholder\n\t\t\t\t\t\thugeicons=\"FilterIcon\"\n\t\t\t\t\t\tlucide=\"FunnelIcon\"\n\t\t\t\t\t\tphosphor=\"FunnelIcon\"\n\t\t\t\t\t\tremixicon=\"RiFilterLine\"\n\t\t\t\t\t\ttabler=\"IconChartFunnel\"\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t},\n\t\t\t{\n\t\t\t\ttitle: \"Retention\",\n\t\t\t\tpath: \"#/retention\",\n\t\t\t\ticon: (\n\t\t\t\t\t<IconPlaceholder\n\t\t\t\t\t\thugeicons=\"RepeatIcon\"\n\t\t\t\t\t\tlucide=\"RepeatIcon\"\n\t\t\t\t\t\tphosphor=\"RepeatIcon\"\n\t\t\t\t\t\tremixicon=\"RiRepeatLine\"\n\t\t\t\t\t\ttabler=\"IconRepeat\"\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t},\n\t\t\t{\n\t\t\t\ttitle: \"Flows\",\n\t\t\t\tpath: \"#/flows\",\n\t\t\t\ticon: (\n\t\t\t\t\t<IconPlaceholder\n\t\t\t\t\t\thugeicons=\"GitBranchIcon\"\n\t\t\t\t\t\tlucide=\"GitBranchIcon\"\n\t\t\t\t\t\tphosphor=\"GitBranchIcon\"\n\t\t\t\t\t\tremixicon=\"RiGitBranchLine\"\n\t\t\t\t\t\ttabler=\"IconGitBranch\"\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t},\n\t\t],\n\t},\n\t{\n\t\tlabel: \"Audiences\",\n\t\titems: [\n\t\t\t{\n\t\t\t\ttitle: \"Segments\",\n\t\t\t\tpath: \"#/segments\",\n\t\t\t\ticon: (\n\t\t\t\t\t<IconPlaceholder\n\t\t\t\t\t\thugeicons=\"UserGroupIcon\"\n\t\t\t\t\t\tlucide=\"UsersIcon\"\n\t\t\t\t\t\tphosphor=\"UsersThreeIcon\"\n\t\t\t\t\t\tremixicon=\"RiGroupLine\"\n\t\t\t\t\t\ttabler=\"IconUsersGroup\"\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t},\n\t\t\t{\n\t\t\t\ttitle: \"Cohorts\",\n\t\t\t\tpath: \"#/cohorts\",\n\t\t\t\ticon: (\n\t\t\t\t\t<IconPlaceholder\n\t\t\t\t\t\thugeicons=\"PieChartIcon\"\n\t\t\t\t\t\tlucide=\"ChartPieIcon\"\n\t\t\t\t\t\tphosphor=\"ChartPieIcon\"\n\t\t\t\t\t\tremixicon=\"RiPieChartLine\"\n\t\t\t\t\t\ttabler=\"IconChartPie\"\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t},\n\t\t\t{\n\t\t\t\ttitle: \"Profiles\",\n\t\t\t\tpath: \"#/profiles\",\n\t\t\t\ticon: (\n\t\t\t\t\t<IconPlaceholder\n\t\t\t\t\t\thugeicons=\"UserIcon\"\n\t\t\t\t\t\tlucide=\"UserIcon\"\n\t\t\t\t\t\tphosphor=\"UserIcon\"\n\t\t\t\t\t\tremixicon=\"RiUserLine\"\n\t\t\t\t\t\ttabler=\"IconUser\"\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t},\n\t\t],\n\t},\n\t{\n\t\tlabel: \"Configure\",\n\t\titems: [\n\t\t\t{\n\t\t\t\ttitle: \"Integrations\",\n\t\t\t\tpath: \"#/integrations\",\n\t\t\t\ticon: (\n\t\t\t\t\t<IconPlaceholder\n\t\t\t\t\t\thugeicons=\"Plug01Icon\"\n\t\t\t\t\t\tlucide=\"PlugIcon\"\n\t\t\t\t\t\tphosphor=\"PlugIcon\"\n\t\t\t\t\t\tremixicon=\"RiPlugLine\"\n\t\t\t\t\t\ttabler=\"IconPlug\"\n\t\t\t\t\t/>\n\t\t\t\t),\n\t\t\t},\n\t\t],\n\t},\n];\n\nexport const navLinks: SidebarNavItem[] = [\n\t...navGroups.flatMap((group) =>\n\t\tgroup.items.flatMap((item) =>\n\t\t\titem.subItems?.length ? [item, ...item.subItems] : [item]\n\t\t)\n\t),\n];\n"},{"path":"registry/blocks/app-shell/5/app-search.tsx","type":"registry:component","content":"\"use client\";\n\nimport { useRef } from \"react\";\nimport { useKeypress } from \"@/hooks/use-keypress\";\nimport {\n\tInputGroup,\n\tInputGroupAddon,\n\tInputGroupInput,\n} from \"@/components/ui/input-group\";\nimport { Kbd, KbdGroup } from \"@/components/ui/kbd\";\nimport { useSidebar } from \"@/components/ui/sidebar\";\n\nexport function AppSearch() {\n\tconst groupRef = useRef<HTMLDivElement>(null);\n\tconst { setOpen } = useSidebar();\n\n\tuseKeypress({\n\t\tcombo: [\"meta+k\", \"ctrl+k\"],\n\t\tcallback: () => {\n\t\t\tconst input = groupRef.current?.querySelector<HTMLInputElement>(\n\t\t\t\t\"[data-slot=input-group-control]\"\n\t\t\t);\n\t\t\tinput?.focus({ preventScroll: true });\n\t\t\tsetOpen(true);\n\t\t},\n\t});\n\n\treturn (\n\t\t<InputGroup ref={groupRef}>\n\t\t\t<InputGroupAddon align=\"inline-start\" className=\"pl-1.75\">\n\t\t\t\t<IconPlaceholder\n\t\t\t\t\thugeicons=\"SearchIcon\"\n\t\t\t\t\tlucide=\"SearchIcon\"\n\t\t\t\t\tphosphor=\"MagnifyingGlassIcon\"\n\t\t\t\t\tremixicon=\"RiSearchLine\"\n\t\t\t\t\ttabler=\"IconSearch\"\n\t\t\t\t/>\n\t\t\t</InputGroupAddon>\n\t\t\t<InputGroupInput\n\t\t\t\taria-label=\"Search\"\n\t\t\t\tname=\"q\"\n\t\t\t\tplaceholder=\"Search...\"\n\t\t\t\ttype=\"search\"\n\t\t\t/>\n\t\t\t<InputGroupAddon align=\"inline-end\">\n\t\t\t\t<KbdGroup>\n\t\t\t\t\t<Kbd>⌘</Kbd>\n\t\t\t\t\t<Kbd>K</Kbd>\n\t\t\t\t</KbdGroup>\n\t\t\t</InputGroupAddon>\n\t\t</InputGroup>\n\t);\n}\n"},{"path":"registry/blocks/app-shell/5/app-sidebar.tsx","type":"registry:component","content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { LogoIcon } from \"@/components/logo\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n\tSidebar,\n\tSidebarContent,\n\tSidebarFooter,\n\tSidebarGroup,\n\tSidebarGroupLabel,\n\tSidebarHeader,\n\tSidebarMenu,\n\tSidebarMenuButton,\n\tSidebarMenuItem,\n\tSidebarRail,\n} from \"@/components/ui/sidebar\";\nimport { AppSearch } from \"@/components/app-search\";\nimport { navGroups } from \"@/components/app-shared\";\nimport { CustomTrigger } from \"@/components/custom-trigger\";\nimport { LatestChange } from \"@/components/latest-change\";\nimport { ThemeSwitcher } from \"@/components/theme-switcher\";\n\nexport function AppSidebar() {\n\treturn (\n\t\t<Sidebar\n\t\t\tclassName={cn(\n\t\t\t\t\"*:data-[slot=sidebar-inner]:bg-background\",\n\t\t\t\t\"transition-[left,right,top,width] group-data-[collapsible=offExamples]:top-[calc(var(--app-header-height)*0.5)]\"\n\t\t\t)}\n\t\t\tcollapsible=\"offExamples\"\n\t\t\tvariant=\"sidebar\"\n\t\t>\n\t\t\t<SidebarHeader className=\"h-(--app-header-height,3rem) flex-row items-center justify-between\">\n\t\t\t\t<Button asChild variant=\"ghost\">\n\t\t\t\t\t<a href=\"#link\">\n\t\t\t\t\t\t<LogoIcon />\n\t\t\t\t\t\t<span className=\"font-medium\">Efferd</span>\n\t\t\t\t\t</a>\n\t\t\t\t</Button>\n\t\t\t\t<CustomTrigger place=\"sidebar\" />\n\t\t\t</SidebarHeader>\n\t\t\t<SidebarContent>\n\t\t\t\t<SidebarGroup>\n\t\t\t\t\t<AppSearch />\n\t\t\t\t</SidebarGroup>\n\t\t\t\t{navGroups.map((group) => (\n\t\t\t\t\t<SidebarGroup key={group.label}>\n\t\t\t\t\t\t<SidebarGroupLabel className=\"group-data-[collapsible=icon]:pointer-events-none\">\n\t\t\t\t\t\t\t{group.label}\n\t\t\t\t\t\t</SidebarGroupLabel>\n\t\t\t\t\t\t<SidebarMenu>\n\t\t\t\t\t\t\t{group.items.map((item) => (\n\t\t\t\t\t\t\t\t<SidebarMenuItem key={item.title}>\n\t\t\t\t\t\t\t\t\t<SidebarMenuButton\n\t\t\t\t\t\t\t\t\t\tasChild\n\t\t\t\t\t\t\t\t\t\tisActive={item.isActive}\n\t\t\t\t\t\t\t\t\t\ttooltip={item.title}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<a href={item.path}>\n\t\t\t\t\t\t\t\t\t\t\t{item.icon}\n\t\t\t\t\t\t\t\t\t\t\t<span>{item.title}</span>\n\t\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t\t</SidebarMenuButton>\n\t\t\t\t\t\t\t\t</SidebarMenuItem>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</SidebarMenu>\n\t\t\t\t\t</SidebarGroup>\n\t\t\t\t))}\n\t\t\t</SidebarContent>\n\t\t\t<SidebarFooter className=\"px-4\">\n\t\t\t\t<LatestChange />\n\t\t\t\t<div className=\"flex items-center pt-4 pb-2\">\n\t\t\t\t\t<ThemeSwitcher />\n\t\t\t\t\t<Button\n\t\t\t\t\t\tasChild\n\t\t\t\t\t\tclassName=\"text-muted-foreground\"\n\t\t\t\t\t\tsize=\"icon-sm\"\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<a aria-label=\"Settings\" href=\"#\">\n\t\t\t\t\t\t\t<IconPlaceholder\n\t\t\t\t\t\t\t\thugeicons=\"Settings01Icon\"\n\t\t\t\t\t\t\t\tlucide=\"SettingsIcon\"\n\t\t\t\t\t\t\t\tphosphor=\"GearIcon\"\n\t\t\t\t\t\t\t\tremixicon=\"RiSettings3Line\"\n\t\t\t\t\t\t\t\ttabler=\"IconSettings\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t</SidebarFooter>\n\t\t\t<SidebarRail />\n\t\t</Sidebar>\n\t);\n}\n"},{"path":"registry/blocks/app-shell/5/custom-trigger.tsx","type":"registry:component","content":"\"use client\";\nimport { cn } from \"@/lib/utils\";\nimport { useIsMobile } from \"@/hooks/use-mobile\";\nimport { SidebarTrigger, useSidebar } from \"@/components/ui/sidebar\";\n\ntype Place = \"sidebar\" | \"navbar\";\n\nexport function CustomTrigger({ place }: { place: Place }) {\n\tconst isMobile = useIsMobile();\n\tconst { open, openMobile } = useSidebar();\n\tconst sidebarOpen = isMobile ? openMobile : open;\n\n\treturn (\n\t\t<SidebarTrigger\n\t\t\tclassName={cn(\n\t\t\t\t\"transition-opacity duration-0 ease-out motion-reduce:transition-none\",\n\t\t\t\t!sidebarOpen &&\n\t\t\t\t\tplace === \"navbar\" &&\n\t\t\t\t\t\"0fill-mode-forwards delay-100 duration-300\",\n\t\t\t\tsidebarOpen && place === \"navbar\" && \"pointer-events-none opacity-0\",\n\t\t\t\t!sidebarOpen && place === \"sidebar\" && \"pointer-events-none opacity-0\"\n\t\t\t)}\n\t\t/>\n\t);\n}\n"},{"path":"registry/blocks/app-shell/5/app-shell.tsx","type":"registry:component","content":"import { cn } from \"@/lib/utils\";\nimport { SidebarInset, SidebarProvider } from \"@/components/ui/sidebar\";\nimport { AppHeader } from \"@/components/app-header\";\nimport { AppSidebar } from \"@/components/app-sidebar\";\n\nexport function AppShell({ children }: { children: React.ReactNode }) {\n\treturn (\n\t\t<SidebarProvider\n\t\t\tclassName={cn(\n\t\t\t\t\"[--app-wrapper-max-width:80rem]\",\n\t\t\t\t\"[--app-header-height:3rem]\"\n\t\t\t)}\n\t\t>\n\t\t\t<AppSidebar />\n\t\t\t<SidebarInset className=\"bg-muted dark:bg-background\">\n\t\t\t\t<AppHeader />\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"flex flex-1 flex-col p-4 md:p-6\",\n\t\t\t\t\t\t\"mx-auto w-full max-w-(--app-wrapper-max-width)\"\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</SidebarInset>\n\t\t</SidebarProvider>\n\t);\n}\n"},{"path":"registry/blocks/app-shell/5/latest-change.tsx","type":"registry:component","content":"\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport { useState } from \"react\";\nimport { Button } from \"@/components/ui/button\";\n\nconst latestChange = {\n\ttitle: \"Real-time funnels\",\n\tdescription:\n\t\t\"Build and analyze conversion funnels with live event streaming in real-time.\",\n\turl: \"#\",\n} as const;\n\nexport function LatestChange() {\n\tconst [isOpen, setIsOpen] = useState(true);\n\n\tif (!isOpen) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"rounded-lg group/latest-change z-20 size-full justify-center border bg-background\"\n\t\t\t)}\n\t\t>\n\t\t\t<div className=\"relative flex size-full flex-col gap-1.5 overflow-hidden px-3 pt-4 pb-1\">\n\t\t\t\t<p className=\"font-medium text-xs\">{latestChange.title}</p>\n\t\t\t\t<span className=\"text-[10px] text-muted-foreground\">\n\t\t\t\t\t{latestChange.description}\n\t\t\t\t</span>\n\t\t\t\t<Button\n\t\t\t\t\tasChild\n\t\t\t\t\tclassName=\"w-max px-0 font-light text-xs\"\n\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\tvariant=\"link\"\n\t\t\t\t>\n\t\t\t\t\t<a href={latestChange.url}>Read more</a>\n\t\t\t\t</Button>\n\t\t\t\t<Button\n\t\t\t\t\tclassName=\"absolute top-2 right-2 z-10 size-6 rounded-full opacity-0 transition-opacity group-hover/latest-change:opacity-100\"\n\t\t\t\t\tonClick={() => setIsOpen(false)}\n\t\t\t\t\tsize=\"icon-sm\"\n\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t>\n\t\t\t\t\t<IconPlaceholder\n\t\t\t\t\t\tclassName=\"size-3.5 text-muted-foreground\"\n\t\t\t\t\t\thugeicons=\"Cancel01Icon\"\n\t\t\t\t\t\tlucide=\"XIcon\"\n\t\t\t\t\t\tphosphor=\"XIcon\"\n\t\t\t\t\t\tremixicon=\"RiCloseLine\"\n\t\t\t\t\t\ttabler=\"IconX\"\n\t\t\t\t\t/>\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"},{"path":"registry/blocks/app-shell/5/nav-user.tsx","type":"registry:component","content":"\"use client\";\n\nimport {\n\tAvatar,\n\tAvatarFallback,\n\tAvatarImage,\n} from \"@/components/ui/avatar\";\nimport {\n\tDropdownMenu,\n\tDropdownMenuContent,\n\tDropdownMenuGroup,\n\tDropdownMenuItem,\n\tDropdownMenuLabel,\n\tDropdownMenuSeparator,\n\tDropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\n\nconst user = {\n\tname: \"Shaban Haider\",\n\temail: \"shaban@efferd.com\",\n\tavatar: \"https://github.com/shabanhr.png\",\n};\n\nexport function NavUser() {\n\treturn (\n\t\t<DropdownMenu>\n\t\t\t<DropdownMenuTrigger asChild>\n\t\t\t\t<Avatar className=\"size-8\">\n\t\t\t\t\t<AvatarImage src={user.avatar} />\n\t\t\t\t\t<AvatarFallback>{user.name.charAt(0)}</AvatarFallback>\n\t\t\t\t</Avatar>\n\t\t\t</DropdownMenuTrigger>\n\t\t\t<DropdownMenuContent align=\"end\" className=\"w-60\">\n\t\t\t\t<DropdownMenuItem className=\"flex items-center justify-start gap-2\">\n\t\t\t\t\t<DropdownMenuLabel className=\"flex items-center gap-3\">\n\t\t\t\t\t\t<Avatar className=\"size-10\">\n\t\t\t\t\t\t\t<AvatarImage src={user.avatar} />\n\t\t\t\t\t\t\t<AvatarFallback>{user.name.charAt(0)}</AvatarFallback>\n\t\t\t\t\t\t</Avatar>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<span className=\"font-medium text-foreground\">{user.name}</span>{\" \"}\n\t\t\t\t\t\t\t<br />\n\t\t\t\t\t\t\t<div className=\"max-w-full overflow-hidden overflow-ellipsis whitespace-nowrap text-muted-foreground text-xs\">\n\t\t\t\t\t\t\t\t{user.email}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</DropdownMenuLabel>\n\t\t\t\t</DropdownMenuItem>\n\t\t\t\t<DropdownMenuSeparator />\n\t\t\t\t<DropdownMenuGroup>\n\t\t\t\t\t<DropdownMenuItem>\n\t\t\t\t\t\t<IconPlaceholder\n\t\t\t\t\t\t\thugeicons=\"UserMultipleIcon\"\n\t\t\t\t\t\t\tlucide=\"UserIcon\"\n\t\t\t\t\t\t\tphosphor=\"UserIcon\"\n\t\t\t\t\t\t\tremixicon=\"RiUserLine\"\n\t\t\t\t\t\t\ttabler=\"IconUser\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\tAccount\n\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t\t<DropdownMenuItem>\n\t\t\t\t\t\t<IconPlaceholder\n\t\t\t\t\t\t\thugeicons=\"Settings01Icon\"\n\t\t\t\t\t\t\tlucide=\"SettingsIcon\"\n\t\t\t\t\t\t\tphosphor=\"GearIcon\"\n\t\t\t\t\t\t\tremixicon=\"RiSettings3Line\"\n\t\t\t\t\t\t\ttabler=\"IconSettings\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\tSettings\n\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t</DropdownMenuGroup>\n\t\t\t\t<DropdownMenuSeparator />\n\t\t\t\t<DropdownMenuGroup>\n\t\t\t\t\t<DropdownMenuItem>\n\t\t\t\t\t\t<IconPlaceholder\n\t\t\t\t\t\t\thugeicons=\"CreditCardIcon\"\n\t\t\t\t\t\t\tlucide=\"CreditCardIcon\"\n\t\t\t\t\t\t\tphosphor=\"CreditCardIcon\"\n\t\t\t\t\t\t\tremixicon=\"RiBankCardLine\"\n\t\t\t\t\t\t\ttabler=\"IconCreditCard\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\tPlan & Billing\n\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t</DropdownMenuGroup>\n\t\t\t\t<DropdownMenuSeparator />\n\t\t\t\t<DropdownMenuGroup>\n\t\t\t\t\t<DropdownMenuItem\n\t\t\t\t\t\tclassName=\"w-full cursor-pointer\"\n\t\t\t\t\t\tvariant=\"destructive\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<IconPlaceholder\n\t\t\t\t\t\t\thugeicons=\"ArrowLeft01Icon\"\n\t\t\t\t\t\t\tlucide=\"LogOutIcon\"\n\t\t\t\t\t\t\tphosphor=\"CaretLeftIcon\"\n\t\t\t\t\t\t\tremixicon=\"RiArrowLeftSLine\"\n\t\t\t\t\t\t\ttabler=\"IconChevronLeft\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\tLog out\n\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t</DropdownMenuGroup>\n\t\t\t</DropdownMenuContent>\n\t\t</DropdownMenu>\n\t);\n}\n"},{"path":"registry/blocks/app-shell/5/theme-switcher.tsx","type":"registry:component","content":"\"use client\";\n\nimport { useTheme } from \"next-themes\";\nimport * as React from \"react\";\nimport { Button } from \"@/components/ui/button\";\n\nexport function ThemeSwitcher() {\n\tconst { setTheme, resolvedTheme } = useTheme();\n\n\tconst toggleTheme = React.useCallback(() => {\n\t\tsetTheme(resolvedTheme === \"dark\" ? \"light\" : \"dark\");\n\t}, [resolvedTheme, setTheme]);\n\n\treturn (\n\t\t<Button\n\t\t\tclassName=\"text-muted-foreground\"\n\t\t\tonClick={toggleTheme}\n\t\t\tsize=\"icon-sm\"\n\t\t\tvariant=\"ghost\"\n\t\t>\n\t\t\t<svg\n\t\t\t\tclassName=\"size-4.5\"\n\t\t\t\tfill=\"none\"\n\t\t\t\theight=\"24\"\n\t\t\t\tstroke=\"currentColor\"\n\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\tstrokeWidth=\"2\"\n\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\twidth=\"24\"\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t>\n\t\t\t\t<path d=\"M0 0h24v24H0z\" fill=\"none\" stroke=\"none\" />\n\t\t\t\t<path d=\"M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\" />\n\t\t\t\t<path d=\"M12 3l0 18\" />\n\t\t\t\t<path d=\"M12 9l4.65 -4.65\" />\n\t\t\t\t<path d=\"M12 14.3l7.37 -7.37\" />\n\t\t\t\t<path d=\"M12 19.6l8.85 -8.85\" />\n\t\t\t</svg>\n\t\t\t<span className=\"sr-only\">Toggle theme</span>\n\t\t</Button>\n\t);\n}\n"}]}