mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-07-08 06:28:37 +00:00
137b1c12b7
* feat: add phosphor icons to base ui * feat_ add phosphor to blocks * feat: add phosphor to radix blocks * feat: add phosphor to radix ui * feat: add phosphor to radix example * feat: add missing phosphor icons * fix: rename broken icons * chore: format files * fix: add missing phosphor icons * chore: build registry --------- Co-authored-by: shadcn <m@shadcn.com>
18 lines
8.0 KiB
JSON
18 lines
8.0 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "sidebar-inset-example",
|
|
"title": "Sidebar (Inset)",
|
|
"registryDependencies": [
|
|
"collapsible",
|
|
"sidebar",
|
|
"example"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/base-nova/examples/sidebar-inset-example.tsx",
|
|
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from \"@/registry/bases/base/ui/collapsible\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarInset,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n SidebarProvider,\n SidebarRail,\n SidebarTrigger,\n} from \"@/registry/bases/base/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarInsetExample() {\n const data = {\n navMain: [\n {\n title: \"Dashboard\",\n url: \"#\",\n icon: (\n <IconPlaceholder\n lucide=\"HomeIcon\"\n tabler=\"IconHome\"\n hugeicons=\"Home01Icon\"\n phosphor=\"HouseIcon\"\n />\n ),\n isActive: true,\n items: [\n {\n title: \"Overview\",\n url: \"#\",\n },\n {\n title: \"Analytics\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"Analytics\",\n url: \"#\",\n icon: (\n <IconPlaceholder\n lucide=\"ChartLineIcon\"\n tabler=\"IconChartLine\"\n hugeicons=\"ChartIcon\"\n phosphor=\"ChartLineIcon\"\n />\n ),\n items: [\n {\n title: \"Reports\",\n url: \"#\",\n },\n {\n title: \"Metrics\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"Orders\",\n url: \"#\",\n icon: (\n <IconPlaceholder\n lucide=\"ShoppingBagIcon\"\n tabler=\"IconShoppingBag\"\n hugeicons=\"ShoppingBag01Icon\"\n phosphor=\"BagIcon\"\n />\n ),\n items: [\n {\n title: \"All Orders\",\n url: \"#\",\n },\n {\n title: \"Pending\",\n url: \"#\",\n },\n {\n title: \"Completed\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"Products\",\n url: \"#\",\n icon: (\n <IconPlaceholder\n lucide=\"ShoppingCartIcon\"\n tabler=\"IconShoppingCart\"\n hugeicons=\"ShoppingCart01Icon\"\n phosphor=\"ShoppingCartIcon\"\n />\n ),\n items: [\n {\n title: \"All Products\",\n url: \"#\",\n },\n {\n title: \"Categories\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"Invoices\",\n url: \"#\",\n icon: (\n <IconPlaceholder\n lucide=\"FileIcon\"\n tabler=\"IconFile\"\n hugeicons=\"File01Icon\"\n phosphor=\"FileIcon\"\n />\n ),\n },\n {\n title: \"Customers\",\n url: \"#\",\n icon: (\n <IconPlaceholder\n lucide=\"UserIcon\"\n tabler=\"IconUser\"\n hugeicons=\"UserIcon\"\n phosphor=\"UserIcon\"\n />\n ),\n },\n {\n title: \"Settings\",\n url: \"#\",\n icon: (\n <IconPlaceholder\n lucide=\"Settings2Icon\"\n tabler=\"IconSettings\"\n hugeicons=\"Settings05Icon\"\n phosphor=\"GearIcon\"\n />\n ),\n },\n ],\n navSecondary: [\n {\n title: \"Support\",\n url: \"#\",\n icon: (\n <IconPlaceholder\n lucide=\"LifeBuoy\"\n tabler=\"IconLifebuoy\"\n hugeicons=\"ChartRingIcon\"\n phosphor=\"LifebuoyIcon\"\n />\n ),\n },\n {\n title: \"Feedback\",\n url: \"#\",\n icon: (\n <IconPlaceholder\n lucide=\"Send\"\n tabler=\"IconSend\"\n hugeicons=\"SentIcon\"\n phosphor=\"PaperPlaneTiltIcon\"\n />\n ),\n },\n ],\n }\n\n return (\n <SidebarProvider>\n <Sidebar variant=\"inset\">\n <SidebarContent>\n <SidebarGroup>\n <SidebarGroupLabel>Dashboard</SidebarGroupLabel>\n <SidebarMenu>\n {data.navMain.map((item) => (\n <Collapsible\n key={item.title}\n defaultOpen={item.isActive}\n render={<SidebarMenuItem />}\n >\n <SidebarMenuButton\n render={<a href={item.url} />}\n isActive={item.isActive}\n >\n {item.icon}\n <span>{item.title}</span>\n </SidebarMenuButton>\n {item.items?.length ? (\n <>\n <CollapsibleTrigger\n render={\n <SidebarMenuAction className=\"data-open:rotate-90\" />\n }\n >\n <IconPlaceholder\n lucide=\"ChevronRightIcon\"\n tabler=\"IconChevronRight\"\n hugeicons=\"ArrowRight01Icon\"\n phosphor=\"CaretRightIcon\"\n />\n <span className=\"sr-only\">Toggle</span>\n </CollapsibleTrigger>\n <CollapsibleContent>\n <SidebarMenuSub>\n {item.items.map((subItem) => (\n <SidebarMenuSubItem key={subItem.title}>\n <SidebarMenuSubButton\n render={<a href={subItem.url} />}\n >\n {subItem.title}\n </SidebarMenuSubButton>\n </SidebarMenuSubItem>\n ))}\n </SidebarMenuSub>\n </CollapsibleContent>\n </>\n ) : null}\n </Collapsible>\n ))}\n </SidebarMenu>\n </SidebarGroup>\n <SidebarGroup className=\"mt-auto\">\n <SidebarGroupContent>\n <SidebarMenu>\n {data.navSecondary.map((item) => (\n <SidebarMenuItem key={item.title}>\n <SidebarMenuButton render={<a href={item.url} />} size=\"sm\">\n {item.icon}\n <span>{item.title}</span>\n </SidebarMenuButton>\n </SidebarMenuItem>\n ))}\n </SidebarMenu>\n </SidebarGroupContent>\n </SidebarGroup>\n </SidebarContent>\n <SidebarRail />\n </Sidebar>\n <SidebarInset>\n <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n <SidebarTrigger className=\"-ml-1\" />\n </header>\n <div className=\"flex flex-1 flex-col gap-4 p-4\">\n <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n </div>\n <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n </div>\n </SidebarInset>\n </SidebarProvider>\n )\n}\n",
|
|
"type": "registry:example"
|
|
}
|
|
],
|
|
"type": "registry:example"
|
|
} |