{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "sidebar-icon-example", "title": "Sidebar (Icon)", "registryDependencies": [ "avatar", "button", "collapsible", "dropdown-menu", "item", "sidebar", "example" ], "files": [ { "path": "registry/radix-rhea/examples/sidebar-icon-example.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-rhea/ui/avatar\"\nimport { Button } from \"@/registry/radix-rhea/ui/button\"\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from \"@/registry/radix-rhea/ui/collapsible\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-rhea/ui/dropdown-menu\"\nimport {\n Item,\n ItemContent,\n ItemDescription,\n ItemMedia,\n ItemTitle,\n} from \"@/registry/radix-rhea/ui/item\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarInset,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n SidebarProvider,\n SidebarRail,\n SidebarTrigger,\n} from \"@/registry/radix-rhea/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n const 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 plan: \"Enterprise\",\n },\n {\n name: \"Acme Corp.\",\n plan: \"Startup\",\n },\n {\n name: \"Evil Corp.\",\n plan: \"Free\",\n },\n ],\n navMain: [\n {\n title: \"Playground\",\n url: \"#\",\n icon: (\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 \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 \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 \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 \n ),\n },\n {\n name: \"Sales & Marketing\",\n url: \"#\",\n icon: (\n \n ),\n },\n {\n name: \"Travel\",\n url: \"#\",\n icon: (\n \n ),\n },\n ],\n }\n\n const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n return (\n \n \n \n \n \n \n \n \n \n

\n \n {activeTeam.name}\n \n \n {activeTeam.plan}\n \n

\n \n \n \n \n \n Teams\n {data.teams.map((team) => (\n setActiveTeam(team)}\n >\n {team.name}\n \n ))}\n \n \n \n \n \n \n \n \n Platform\n \n {data.navMain.map((item) => (\n \n \n \n \n {item.icon}\n {item.title}\n \n \n \n \n \n {item.items?.map((subItem) => (\n \n \n {subItem.title}\n \n \n ))}\n \n \n \n \n ))}\n \n \n \n Projects\n \n {data.projects.map((item) => (\n \n \n \n {item.icon}\n {item.name}\n \n \n \n ))}\n \n \n \n \n \n \n \n \n \n \n \n CN\n \n

\n \n {data.user.name}\n \n \n {data.user.email}\n \n

\n \n \n \n \n \n \n \n \n \n \n CN\n \n \n \n {data.user.name}\n {data.user.email}\n \n \n \n \n \n \n Account\n Billing\n Settings\n \n \n \n Log out\n \n \n \n \n \n \n \n \n \n

\n \n

\n \n \n )\n}\n", "type": "registry:example" } ], "type": "registry:example" }