4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T132e,"use client" import * as React from "react" import { Button } from "@/components/ui/button" import { Sidebar, SidebarContent, SidebarHeader, SidebarFooter, } from "@/components/ui/sidebar" import { Globe, Inbox, House, Search, LibraryBig, SquarePen, Settings, Store, Trash2, } from "lucide-react" import { NavMain, type NavMainItem } from "./nav-main" import { NavRecents, type NavRecentsItem } from "./nav-recents" import { NavFavorites, type NavFavoritesItem } from "./nav-favorites" import { NavPrivate, type NavPrivateItem } from "./nav-private" import { NavSecondary, type NavSecondaryItem } from "./nav-secondary" import { WorkSpaceSwitcher } from "./workspaces-switcher" // Derive the workspace item type from the switcher's props so sample data stays in sync. type WorkspaceItem = React.ComponentProps["workspaces"][number] // Sample data. `satisfies` validates each section against its nav component's item type. const data = { workspaces: [ { name: "Acme Inc", plan: "Enterprise", logo: Globe, }, { name: "Nova Inc", plan: "Enterprise", logo: Globe, }, ] satisfies WorkspaceItem[], navMain: [ { title: "Search", url: "#", icon: Search, }, { title: "Home", url: "#", icon: House, }, { title: "Inbox", url: "#", icon: Inbox, }, { title: "Library", url: "#", icon: LibraryBig, }, ] satisfies NavMainItem[], recents: [ { title: "Quick Notes", url: "#", emoji: "📝" }, { title: "Meeting Minutes", url: "#", emoji: "📋" }, { title: "Ideas", url: "#", emoji: "💡" }, { title: "Changelog", url: "#", emoji: "📜" }, ] satisfies NavRecentsItem[], private: [ { title: "Health Tracker", url: "#", emoji: "💪" }, { title: "Reading List", url: "#", emoji: "📚" }, { title: "Passwords", url: "#", emoji: "🔐" }, { title: "Shopping List", url: "#", emoji: "🛒" }, { title: "Home Tasks", url: "#", emoji: "🏠" }, { title: "Life Goals", url: "#", emoji: "🎯" }, { title: "Side Projects", url: "#", emoji: "🛠️" }, { title: "Ideas Vault", url: "#", emoji: "🏦" }, { title: "Recipes", url: "#", emoji: "🍳" }, ] satisfies NavPrivateItem[], favorites: [ { title: "Project Dashboard", url: "#", emoji: "📊" }, { title: "Design System", url: "#", emoji: "🎨" }, { title: "Component Library", url: "#", emoji: "🧱" }, { title: "Development Guide", url: "#", emoji: "👨‍💻" }, { title: "Team Wiki", url: "#", emoji: "👥" }, { title: "Product Vision", url: "#", emoji: "🔭" }, { title: "Launch Checklist", url: "#", emoji: "✅" }, { title: "User Feedback", url: "#", emoji: "💬" }, { title: "Analytics", url: "#", emoji: "📈" }, { title: "Performance Metrics", url: "#", emoji: "⚡" }, { title: "Security Policy", url: "#", emoji: "🛡️" }, { title: "Database Schema", url: "#", emoji: "🗄️" }, { title: "API Keys", url: "#", emoji: "🔑" }, { title: "Release Notes", url: "#", emoji: "📣" }, { title: "Support Docs", url: "#", emoji: "📚" }, ] satisfies NavFavoritesItem[], navSecondary: [ { title: "Settings", url: "#", icon: Settings, }, { title: "Marketplace", url: "#", icon: Store, }, { title: "Trash", url: "#", icon: Trash2, }, ] satisfies NavSecondaryItem[], } export function AppSidebar({ ...props }: React.ComponentProps) { return (

) } 51:T844,import { MoreHorizontal, type LucideIcon, } from "lucide-react" import { SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, } from "@/components/ui/sidebar" export type NavFavoritesItem = { title: string url: string isActive?: boolean icon?: LucideIcon emoji?: string } export function NavFavorites({ items }: { items: NavFavoritesItem[] }) { return ( Favorites {items.map((subItem) => ( {/* Render either a Lucide icon or an emoji glyph (mutually exclusive). */} {subItem.icon ? : null} {subItem.emoji ? ( ) : null} {subItem.title} ))} ) } 52:T64d,import { type LucideIcon } from "lucide-react" import { SidebarGroup, SidebarGroupContent, SidebarMenu, SidebarMenuButton, SidebarMenuItem, } from "@/components/ui/sidebar" export type NavMainItem = { title: string url: string isActive?: boolean icon?: LucideIcon emoji?: string } export function NavMain({ items }: { items: NavMainItem[] }) { return ( {items.map((subItem) => ( {/* Render either a Lucide icon or an emoji glyph (mutually exclusive). */} {subItem.icon ? : null} {subItem.emoji ? ( ) : null} {subItem.title} ))} ) } 53:T840,import { MoreHorizontal, type LucideIcon, } from "lucide-react" import { SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, } from "@/components/ui/sidebar" export type NavPrivateItem = { title: string url: string isActive?: boolean icon?: LucideIcon emoji?: string } export function NavPrivate({ items }: { items: NavPrivateItem[] }) { return ( Private {items.map((subItem) => ( {/* Render either a Lucide icon or an emoji glyph (mutually exclusive). */} {subItem.icon ? : null} {subItem.emoji ? ( ) : null} {subItem.title} ))} ) } 54:T83a,import { MoreHorizontal, type LucideIcon, } from "lucide-react" import { SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, } from "@/components/ui/sidebar" export type NavRecentsItem = { title: string url: string isActive?: boolean icon?: LucideIcon emoji?: string } export function NavRecents({ items }: { items: NavRecentsItem[] }) { return ( Recents {items.map((subItem) => ( {/* Render either a Lucide icon or an emoji glyph (mutually exclusive). */} {subItem.icon ? : null} {subItem.emoji ? ( ) : null} {subItem.title} ))} ) } 55:T664,import { type LucideIcon } from "lucide-react" import { SidebarGroup, SidebarGroupContent, SidebarMenu, SidebarMenuButton, SidebarMenuItem, } from "@/components/ui/sidebar" export type NavSecondaryItem = { title: string url: string isActive?: boolean icon?: LucideIcon emoji?: string } export function NavSecondary({ items }: { items: NavSecondaryItem[] }) { return ( {items.map((subItem) => ( {/* Render either a Lucide icon or an emoji glyph (mutually exclusive). */} {subItem.icon ? : null} {subItem.emoji ? ( ) : null} {subItem.title} ))} ) } 56:Tdf1,"use client" import * as React from "react" import { ChevronDown, Plus, type LucideIcon } from "lucide-react" import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, } from "@/components/ui/sidebar" export function WorkSpaceSwitcher({ workspaces, }: { workspaces: { name: string logo: LucideIcon plan: string }[] }) { // Default to the first workspace; guard against an empty `workspaces` array. const [activeWorkspace, setActiveWorkspace] = React.useState(workspaces[0]) if (!activeWorkspace) { return null } return ( } >

{activeWorkspace.name} Workspaces {workspaces.map((workspace, index) => ( setActiveWorkspace(workspace)} className="gap-2 p-2" >

{workspace.name} ⌘{index + 1} ))}

Add workspace

) } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4e",null,{"namespace":"@hexui","registryDependencies":["button","dropdown-menu","sidebar"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/blocks/sidebar/sidebar-1/source/app/sidebar/page.tsx","content":"import { AppSidebar } from \"../../components/app-sidebar\"\nimport { SiteHeader } from \"../../components/site-header\"\nimport {\n SidebarInset,\n SidebarProvider,\n} from \"@/components/ui/sidebar\"\n\nexport default function Page() {\n return (\n \n \n \n \n

\n {/* Placeholder canvas for the page content preview. */}\n

\n \n \n )\n}\n","type":"registry:page","target":"app/sidebar/page.tsx"},{"path":"registry/blocks/sidebar/sidebar-1/source/components/app-sidebar.tsx","content":"$50","type":"registry:component"},{"path":"registry/blocks/sidebar/sidebar-1/source/components/nav-favorites.tsx","content":"$51","type":"registry:component"},{"path":"registry/blocks/sidebar/sidebar-1/source/components/nav-main.tsx","content":"$52","type":"registry:component"},{"path":"registry/blocks/sidebar/sidebar-1/source/components/nav-private.tsx","content":"$53","type":"registry:component"},{"path":"registry/blocks/sidebar/sidebar-1/source/components/nav-recents.tsx","content":"$54","type":"registry:component"},{"path":"registry/blocks/sidebar/sidebar-1/source/components/nav-secondary.tsx","content":"$55","type":"registry:component"},{"path":"registry/blocks/sidebar/sidebar-1/source/components/site-header.tsx","content":"import { SidebarTrigger } from \"@/components/ui/sidebar\"\n\nexport function SiteHeader() {\n return (\n

\n \n

\n Quick Notes\n

\n )\n}","type":"registry:component"},{"path":"registry/blocks/sidebar/sidebar-1/source/components/workspaces-switcher.tsx","content":"$56","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]