Sidebar (Icon)

1"use client"
2 
3import * as React from "react"
4 
5import {
6  Avatar,
7  AvatarFallback,
8  AvatarImage,
9} from "@/registry/bases/radix/ui/avatar"
10import { Button } from "@/registry/bases/radix/ui/button"
11import {
12  Collapsible,
13  CollapsibleContent,
14  CollapsibleTrigger,
15} from "@/registry/bases/radix/ui/collapsible"
16import {
17  DropdownMenu,
18  DropdownMenuContent,
19  DropdownMenuGroup,
20  DropdownMenuItem,
21  DropdownMenuLabel,
22  DropdownMenuSeparator,
23  DropdownMenuTrigger,
24} from "@/registry/bases/radix/ui/dropdown-menu"
25import {
26  Item,
27  ItemContent,
28  ItemDescription,
29  ItemMedia,
30  ItemTitle,
31} from "@/registry/bases/radix/ui/item"
32import {
33  Sidebar,
34  SidebarContent,
35  SidebarFooter,
36  SidebarGroup,
37  SidebarGroupContent,
38  SidebarGroupLabel,
39  SidebarHeader,
40  SidebarInset,
41  SidebarMenu,
42  SidebarMenuButton,
43  SidebarMenuItem,
44  SidebarMenuSub,
45  SidebarMenuSubButton,
46  SidebarMenuSubItem,
47  SidebarProvider,
48  SidebarRail,
49  SidebarTrigger,
50} from "@/registry/bases/radix/ui/sidebar"
51import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
52 
53export default function SidebarIconExample() {
54  const data = {
55    user: {
56      name: "shadcn",
57      email: "m@example.com",
58      avatar: "/avatars/shadcn.jpg",
59    },
60    teams: [
61      {
62        name: "Acme Inc",
63        plan: "Enterprise",
64      },
65      {
66        name: "Acme Corp.",
67        plan: "Startup",
68      },
69      {
70        name: "Evil Corp.",
71        plan: "Free",
72      },
73    ],
74    navMain: [
75      {
76        title: "Playground",
77        url: "#",
78        icon: (
79          <IconPlaceholder
80            lucide="TerminalSquareIcon"
81            tabler="IconTerminal2"
82            hugeicons="ComputerTerminalIcon"
83            phosphor="TerminalIcon"
84          />
85        ),
86        isActive: true,
87        items: [
88          {
89            title: "History",
90            url: "#",
91          },
92          {
93            title: "Starred",
94            url: "#",
95          },
96          {
97            title: "Settings",
98            url: "#",
99          },
100        ],
101      },
102      {
103        title: "Models",
104        url: "#",
105        icon: (
106          <IconPlaceholder
107            lucide="BotIcon"
108            tabler="IconRobot"
109            hugeicons="RoboticIcon"
110            phosphor="RobotIcon"
111          />
112        ),
113        items: [
114          {
115            title: "Genesis",
116            url: "#",
117          },
118          {
119            title: "Explorer",
120            url: "#",
121          },
122          {
123// … truncated