50: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"] 51: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"] 52:T12c5,'use client'; import { BookmarkPlus, CircleHelp, LogOut, Plus, PlusCircle, Puzzle, Settings, User, } from 'lucide-react'; import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; import { Button } from '@/components/ui/button'; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'; import { SidebarFooter, SidebarMenu, SidebarMenuItem, } from '@/components/ui/sidebar'; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from '@/components/ui/tooltip'; export function NavFooter({ user, }: { user: { name: string; email: string; avatar: string; }; }) { return (

} > CN

} > Add New

); } 53:T103c,'use client'; import { Search } from 'lucide-react'; import * as React from 'react'; import { useEffect } from 'react'; import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, } from '@/components/ui/command'; import { SidebarHeader } from '@/components/ui/sidebar'; import { cn } from '@/lib/utils'; import type { SidebarData } from '@/components/sidebar-01/types'; interface NavHeaderProps { data: SidebarData; } export function NavHeader({ data }: NavHeaderProps) { const [open, setOpen] = React.useState(false); useEffect(() => { const down = (e: KeyboardEvent) => { if (e.key === 'k' && (e.metaKey || e.ctrlKey)) { e.preventDefault(); setOpen((open) => !open); } }; document.addEventListener('keydown', down); return () => document.removeEventListener('keydown', down); }, []); return ( <>

setOpen(true)} >

⌘K

No results found. {data.navMain.map((item) => ( { setOpen(false); }} > {item.title} ))} {data.navCollapsible.favorites.map((item) => ( { setOpen(false); }} >

{item.title} ))} {data.navCollapsible.teams.map((item) => ( { setOpen(false); }} > {item.title} ))} {data.navCollapsible.topics.map((item) => ( { setOpen(false); }} > {item.title} ))} ); } 54:Tc02,'use client'; import { IconAd2, IconBellRinging, IconCalendar, IconCalendarStats, IconListDetails, IconNews, IconNotebook, IconProgressCheck, IconSettingsCode, } from '@tabler/icons-react'; import { LayoutDashboard, Package } from 'lucide-react'; import { Sidebar, SidebarContent } from '@/components/ui/sidebar'; import { NavCollapsible } from '@/components/sidebar-01/nav-collapsible'; import { NavFooter } from '@/components/sidebar-01/nav-footer'; import { NavHeader } from '@/components/sidebar-01/nav-header'; import { NavMain } from '@/components/sidebar-01/nav-main'; import type { SidebarData } from '@/components/sidebar-01/types'; const data: SidebarData = { user: { name: 'ephraim', email: 'ephraim@blocks.so', avatar: '/avatar-01.png', }, navMain: [ { id: 'overview', title: 'Overview', url: '#', icon: LayoutDashboard, isActive: true, }, { id: 'tasks', title: 'Tasks', url: '#', icon: IconListDetails, }, { id: 'meetings', title: 'Meetings', url: '#', icon: IconCalendarStats, }, { id: 'notes', title: 'Notes', url: '#', icon: IconNotebook, }, { id: 'calendar', title: 'Calendar', url: '#', icon: IconCalendar, }, { id: 'completed', title: 'Completed', url: '#', icon: IconProgressCheck, }, { id: 'notifications', title: 'Notifications', url: '#', icon: IconBellRinging, }, ], navCollapsible: { favorites: [ { id: 'design', title: 'Design', href: '#', color: 'bg-green-400 dark:bg-green-300', }, { id: 'development', title: 'Development', href: '#', color: 'bg-blue-400 dark:bg-blue-300', }, { id: 'workshop', title: 'Workshop', href: '#', color: 'bg-orange-400 dark:bg-orange-300', }, { id: 'personal', title: 'Personal', href: '#', color: 'bg-red-400 dark:bg-red-300', }, ], teams: [ { id: 'engineering', title: 'Engineering', icon: IconSettingsCode, }, { id: 'marketing', title: 'Marketing', icon: IconAd2, }, ], topics: [ { id: 'product-updates', title: 'Product Updates', icon: Package, }, { id: 'company-news', title: 'Company News', icon: IconNews, }, ], }, }; export function AppSidebar({ ...props }: React.ComponentProps) { return ( ); } 55:Tda3,'use client'; import { ChevronDown } from 'lucide-react'; import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from '@/components/ui/collapsible'; import { SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, } from '@/components/ui/sidebar'; import type { FavoriteItem, TeamItem, TopicItem } from '@/components/sidebar-01/types'; interface NavCollapsibleProps { favorites: FavoriteItem[]; teams: TeamItem[]; topics: TopicItem[]; } export function NavCollapsible({ favorites, teams, topics, }: NavCollapsibleProps) { return (

{favorites && favorites.length > 0 && ( } > Favorites {favorites.map((item) => ( } >

{item.title} ))} )} {[ { label: 'Teams', items: teams }, { label: 'Topics', items: topics }, ].map( ({ label, items }) => items && items.length > 0 && ( } > {label} {items.map((item) => { const Icon = item.icon; return ( {item.title} ); })} ) )}

); } 4f:["$","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","@tabler/icons-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tabler%2Ficons-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":"@tabler/icons-react"}]]}]}],["$","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@blocks-so","registryDependencies":["avatar","button","collapsible","command","dropdown-menu","sidebar","tooltip"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"content/components/sidebar/sidebar-01/nav-footer.tsx","content":"$52","type":"registry:component","target":"components/sidebar-01/nav-footer.tsx"},{"path":"content/components/sidebar/sidebar-01/nav-header.tsx","content":"$53","type":"registry:component","target":"components/sidebar-01/nav-header.tsx"},{"path":"content/components/sidebar/sidebar-01/types.ts","content":"import type { ElementType } from 'react';\n\nexport interface NavItem {\n id: string;\n title: string;\n icon: ElementType;\n url?: string;\n isActive?: boolean;\n}\n\nexport interface User {\n name: string;\n email: string;\n avatar: string;\n}\n\nexport interface FavoriteItem {\n id: string;\n title: string;\n href: string;\n color: string;\n}\n\nexport interface TeamItem {\n id: string;\n title: string;\n icon: ElementType;\n}\n\nexport interface TopicItem {\n id: string;\n title: string;\n icon: ElementType;\n}\n\nexport interface SidebarData {\n user: User;\n navMain: NavItem[];\n navCollapsible: {\n favorites: FavoriteItem[];\n teams: TeamItem[];\n topics: TopicItem[];\n };\n}\n","type":"registry:file","target":"components/sidebar-01/types.ts"},{"path":"content/components/sidebar/sidebar-01/nav-main.tsx","content":"'use client';\n\nimport {\n SidebarGroup,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from '@/components/ui/sidebar';\nimport type { NavItem } from '@/components/sidebar-01/types';\n\nexport function NavMain({ items }: { items: NavItem[] }) {\n return (\n \n \n {items.map((item) => {\n const Icon = item.icon;\n\n return (\n \n \n {Icon && }\n {item.title}\n \n \n );\n })}\n \n \n );\n}\n","type":"registry:component","target":"components/sidebar-01/nav-main.tsx"},{"path":"content/components/sidebar/sidebar-01/index.tsx","content":"import {\n SidebarInset,\n SidebarProvider,\n SidebarTrigger,\n} from '@/components/ui/sidebar';\nimport { AppSidebar } from '@/components/sidebar-01/app-sidebar';\n\nexport default function Sidebar01() {\n return (\n \n \n \n

\n \n

\n \n \n );\n}\n","type":"registry:component","target":"components/sidebar-01/index.tsx"},{"path":"content/components/sidebar/sidebar-01/app-sidebar.tsx","content":"$54","type":"registry:component","target":"components/sidebar-01/app-sidebar.tsx"},{"path":"content/components/sidebar/sidebar-01/nav-collapsible.tsx","content":"$55","type":"registry:component","target":"components/sidebar-01/nav-collapsible.tsx"}],"className":"h-[70svh] min-h-80"}]]}]