28 lines
17 KiB
JSON
28 lines
17 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "radix-sidebar-demo",
|
|
"type": "registry:ui",
|
|
"title": "Radix Sidebar Demo",
|
|
"description": "Demo showing a sidebar with radix components.",
|
|
"dependencies": [
|
|
"lucide-react",
|
|
"motion"
|
|
],
|
|
"registryDependencies": [
|
|
"https://animate-ui.com/r/radix-sidebar",
|
|
"https://animate-ui.com/r/radix-collapsible",
|
|
"https://animate-ui.com/r/radix-dropdown-menu",
|
|
"use-mobile",
|
|
"avatar",
|
|
"breadcrumb",
|
|
"separator"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/demo/radix/sidebar/index.tsx",
|
|
"content": "'use client';\n\nimport * as React from 'react';\n\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from '@/components/ui/breadcrumb';\nimport { Separator } from '@/components/ui/separator';\nimport {\n SidebarProvider,\n SidebarInset,\n SidebarTrigger,\n Sidebar,\n SidebarHeader,\n SidebarContent,\n SidebarFooter,\n SidebarRail,\n SidebarGroup,\n SidebarGroupLabel,\n SidebarMenu,\n SidebarMenuItem,\n SidebarMenuButton,\n SidebarMenuSub,\n SidebarMenuSubItem,\n SidebarMenuSubButton,\n SidebarMenuAction,\n} from '@/components/animate-ui/radix/sidebar';\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from '@/components/animate-ui/radix/collapsible';\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuTrigger,\n} from '@/components/animate-ui/radix/dropdown-menu';\nimport {\n AudioWaveform,\n BadgeCheck,\n Bell,\n BookOpen,\n Bot,\n ChevronRight,\n ChevronsUpDown,\n Command,\n CreditCard,\n Folder,\n Forward,\n Frame,\n GalleryVerticalEnd,\n LogOut,\n Map,\n MoreHorizontal,\n PieChart,\n Plus,\n Settings2,\n Sparkles,\n SquareTerminal,\n Trash2,\n} from 'lucide-react';\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from '@/components/ui/avatar';\nimport { useIsMobile } from '@/hooks/use-mobile';\n\nconst DATA = {\n user: {\n name: 'Skyleen',\n email: 'skyleen@example.com',\n avatar:\n 'https://pbs.twimg.com/profile_images/1909615404789506048/MTqvRsjo_400x400.jpg',\n },\n teams: [\n {\n name: 'Acme Inc',\n logo: GalleryVerticalEnd,\n plan: 'Enterprise',\n },\n {\n name: 'Acme Corp.',\n logo: AudioWaveform,\n plan: 'Startup',\n },\n {\n name: 'Evil Corp.',\n logo: Command,\n plan: 'Free',\n },\n ],\n navMain: [\n {\n title: 'Playground',\n url: '#',\n icon: SquareTerminal,\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: Bot,\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: BookOpen,\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: Settings2,\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: Frame,\n },\n {\n name: 'Sales & Marketing',\n url: '#',\n icon: PieChart,\n },\n {\n name: 'Travel',\n url: '#',\n icon: Map,\n },\n ],\n};\n\nexport const RadixSidebarDemo = () => {\n const isMobile = useIsMobile();\n const [activeTeam, setActiveTeam] = React.useState(DATA.teams[0]);\n\n if (!activeTeam) return null;\n\n return (\n <SidebarProvider>\n <Sidebar collapsible=\"icon\">\n <SidebarHeader>\n {/* Team Switcher */}\n <SidebarMenu>\n <SidebarMenuItem>\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <SidebarMenuButton\n size=\"lg\"\n className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n >\n <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n <activeTeam.logo className=\"size-4\" />\n </div>\n <div className=\"grid flex-1 text-left text-sm leading-tight\">\n <span className=\"truncate font-semibold\">\n {activeTeam.name}\n </span>\n <span className=\"truncate text-xs\">\n {activeTeam.plan}\n </span>\n </div>\n <ChevronsUpDown className=\"ml-auto\" />\n </SidebarMenuButton>\n </DropdownMenuTrigger>\n <DropdownMenuContent\n className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n align=\"start\"\n side={isMobile ? 'bottom' : 'right'}\n sideOffset={4}\n >\n <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n Teams\n </DropdownMenuLabel>\n {DATA.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-sm border\">\n <team.logo className=\"size-4 shrink-0\" />\n </div>\n {team.name}\n <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n </DropdownMenuItem>\n ))}\n <DropdownMenuSeparator />\n <DropdownMenuItem className=\"gap-2 p-2\">\n <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n <Plus className=\"size-4\" />\n </div>\n <div className=\"font-medium text-muted-foreground\">\n Add team\n </div>\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </SidebarMenuItem>\n </SidebarMenu>\n {/* Team Switcher */}\n </SidebarHeader>\n\n <SidebarContent>\n {/* Nav Main */}\n <SidebarGroup>\n <SidebarGroupLabel>Platform</SidebarGroupLabel>\n <SidebarMenu>\n {DATA.navMain.map((item) => (\n <Collapsible\n key={item.title}\n asChild\n defaultOpen={item.isActive}\n className=\"group/collapsible\"\n >\n <SidebarMenuItem>\n <CollapsibleTrigger asChild>\n <SidebarMenuButton tooltip={item.title}>\n {item.icon && <item.icon />}\n <span>{item.title}</span>\n <ChevronRight className=\"ml-auto transition-transform duration-300 group-data-[state=open]/collapsible:rotate-90\" />\n </SidebarMenuButton>\n </CollapsibleTrigger>\n <CollapsibleContent>\n <SidebarMenuSub>\n {item.items?.map((subItem) => (\n <SidebarMenuSubItem key={subItem.title}>\n <SidebarMenuSubButton asChild>\n <a href={subItem.url}>\n <span>{subItem.title}</span>\n </a>\n </SidebarMenuSubButton>\n </SidebarMenuSubItem>\n ))}\n </SidebarMenuSub>\n </CollapsibleContent>\n </SidebarMenuItem>\n </Collapsible>\n ))}\n </SidebarMenu>\n </SidebarGroup>\n {/* Nav Main */}\n\n {/* Nav Project */}\n <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n <SidebarGroupLabel>Projects</SidebarGroupLabel>\n <SidebarMenu>\n {DATA.projects.map((item) => (\n <SidebarMenuItem key={item.name}>\n <SidebarMenuButton asChild>\n <a href={item.url}>\n <item.icon />\n <span>{item.name}</span>\n </a>\n </SidebarMenuButton>\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <SidebarMenuAction showOnHover>\n <MoreHorizontal />\n <span className=\"sr-only\">More</span>\n </SidebarMenuAction>\n </DropdownMenuTrigger>\n <DropdownMenuContent\n className=\"w-48 rounded-lg\"\n side={isMobile ? 'bottom' : 'right'}\n align={isMobile ? 'end' : 'start'}\n >\n <DropdownMenuItem>\n <Folder className=\"text-muted-foreground\" />\n <span>View Project</span>\n </DropdownMenuItem>\n <DropdownMenuItem>\n <Forward className=\"text-muted-foreground\" />\n <span>Share Project</span>\n </DropdownMenuItem>\n <DropdownMenuSeparator />\n <DropdownMenuItem>\n <Trash2 className=\"text-muted-foreground\" />\n <span>Delete Project</span>\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </SidebarMenuItem>\n ))}\n <SidebarMenuItem>\n <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n <MoreHorizontal className=\"text-sidebar-foreground/70\" />\n <span>More</span>\n </SidebarMenuButton>\n </SidebarMenuItem>\n </SidebarMenu>\n </SidebarGroup>\n {/* Nav Project */}\n </SidebarContent>\n <SidebarFooter>\n {/* Nav User */}\n <SidebarMenu>\n <SidebarMenuItem>\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <SidebarMenuButton\n size=\"lg\"\n className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n >\n <Avatar className=\"h-8 w-8 rounded-lg\">\n <AvatarImage\n src={DATA.user.avatar}\n alt={DATA.user.name}\n />\n <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n </Avatar>\n <div className=\"grid flex-1 text-left text-sm leading-tight\">\n <span className=\"truncate font-semibold\">\n {DATA.user.name}\n </span>\n <span className=\"truncate text-xs\">\n {DATA.user.email}\n </span>\n </div>\n <ChevronsUpDown className=\"ml-auto size-4\" />\n </SidebarMenuButton>\n </DropdownMenuTrigger>\n <DropdownMenuContent\n className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n side={isMobile ? 'bottom' : 'right'}\n align=\"end\"\n sideOffset={4}\n >\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 className=\"h-8 w-8 rounded-lg\">\n <AvatarImage\n src={DATA.user.avatar}\n alt={DATA.user.name}\n />\n <AvatarFallback className=\"rounded-lg\">\n CN\n </AvatarFallback>\n </Avatar>\n <div className=\"grid flex-1 text-left text-sm leading-tight\">\n <span className=\"truncate font-semibold\">\n {DATA.user.name}\n </span>\n <span className=\"truncate text-xs\">\n {DATA.user.email}\n </span>\n </div>\n </div>\n </DropdownMenuLabel>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <Sparkles />\n Upgrade to Pro\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <BadgeCheck />\n Account\n </DropdownMenuItem>\n <DropdownMenuItem>\n <CreditCard />\n Billing\n </DropdownMenuItem>\n <DropdownMenuItem>\n <Bell />\n Notifications\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuItem>\n <LogOut />\n Log out\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </SidebarMenuItem>\n </SidebarMenu>\n {/* Nav User */}\n </SidebarFooter>\n <SidebarRail />\n </Sidebar>\n\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 orientation=\"vertical\" className=\"mr-2 h-4\" />\n <Breadcrumb>\n <BreadcrumbList>\n <BreadcrumbItem className=\"hidden md:block\">\n <BreadcrumbLink href=\"#\">\n Building 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=\"aspect-video rounded-xl bg-muted/50\" />\n <div className=\"aspect-video rounded-xl bg-muted/50\" />\n <div className=\"aspect-video rounded-xl bg-muted/50\" />\n </div>\n <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n </div>\n </SidebarInset>\n </SidebarProvider>\n );\n};\n",
|
|
"type": "registry:ui",
|
|
"target": "components/animate-ui/demo/radix/sidebar.tsx"
|
|
}
|
|
]
|
|
} |