mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-07-02 17:08:39 +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>
21 lines
8.4 KiB
JSON
21 lines
8.4 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "sidebar-example",
|
|
"title": "Sidebar",
|
|
"registryDependencies": [
|
|
"button",
|
|
"dropdown-menu",
|
|
"item",
|
|
"label",
|
|
"sidebar",
|
|
"example"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/base-nova/examples/sidebar-example.tsx",
|
|
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/bases/base/ui/dropdown-menu\"\nimport {\n Item,\n ItemActions,\n ItemContent,\n ItemDescription,\n ItemTitle,\n} from \"@/registry/bases/base/ui/item\"\nimport { Label } from \"@/registry/bases/base/ui/label\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarInput,\n SidebarInset,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\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 SidebarExample() {\n const data = {\n versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n navMain: [\n {\n title: \"Getting Started\",\n url: \"#\",\n items: [\n {\n title: \"Installation\",\n url: \"#\",\n },\n {\n title: \"Project Structure\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"Building Your Application\",\n url: \"#\",\n items: [\n {\n title: \"Routing\",\n url: \"#\",\n },\n {\n title: \"Data Fetching\",\n url: \"#\",\n isActive: true,\n },\n {\n title: \"Rendering\",\n url: \"#\",\n },\n {\n title: \"Caching\",\n url: \"#\",\n },\n {\n title: \"Styling\",\n url: \"#\",\n },\n {\n title: \"Optimizing\",\n url: \"#\",\n },\n {\n title: \"Configuring\",\n url: \"#\",\n },\n {\n title: \"Testing\",\n url: \"#\",\n },\n {\n title: \"Authentication\",\n url: \"#\",\n },\n {\n title: \"Deploying\",\n url: \"#\",\n },\n {\n title: \"Upgrading\",\n url: \"#\",\n },\n {\n title: \"Examples\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"API Reference\",\n url: \"#\",\n items: [\n {\n title: \"Components\",\n url: \"#\",\n },\n {\n title: \"File Conventions\",\n url: \"#\",\n },\n {\n title: \"Functions\",\n url: \"#\",\n },\n {\n title: \"next.config.js Options\",\n url: \"#\",\n },\n {\n title: \"CLI\",\n url: \"#\",\n },\n {\n title: \"Edge Runtime\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"Architecture\",\n url: \"#\",\n items: [\n {\n title: \"Accessibility\",\n url: \"#\",\n },\n {\n title: \"Fast Refresh\",\n url: \"#\",\n },\n {\n title: \"Next.js Compiler\",\n url: \"#\",\n },\n {\n title: \"Supported Browsers\",\n url: \"#\",\n },\n {\n title: \"Turbopack\",\n url: \"#\",\n },\n ],\n },\n ],\n }\n\n const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n return (\n <SidebarProvider>\n <Sidebar>\n <SidebarHeader>\n <SidebarMenu>\n <SidebarMenuItem>\n <DropdownMenu>\n <DropdownMenuTrigger\n render={\n <SidebarMenuButton\n size=\"lg\"\n className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n />\n }\n >\n <Item className=\"p-0\" size=\"xs\">\n <ItemContent>\n <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n <ItemDescription>v{selectedVersion}</ItemDescription>\n </ItemContent>\n <ItemActions>\n <IconPlaceholder\n lucide=\"ChevronsUpDownIcon\"\n tabler=\"IconSelector\"\n hugeicons=\"UnfoldMoreIcon\"\n phosphor=\"CaretUpDownIcon\"\n />\n </ItemActions>\n </Item>\n </DropdownMenuTrigger>\n <DropdownMenuContent>\n {data.versions.map((version) => (\n <DropdownMenuItem\n key={version}\n onSelect={() => setSelectedVersion(version)}\n >\n v{version}{\" \"}\n {version === selectedVersion && (\n <IconPlaceholder\n lucide=\"CheckIcon\"\n tabler=\"IconCheck\"\n hugeicons=\"Tick02Icon\"\n phosphor=\"CheckIcon\"\n className=\"ml-auto\"\n />\n )}\n </DropdownMenuItem>\n ))}\n </DropdownMenuContent>\n </DropdownMenu>\n </SidebarMenuItem>\n </SidebarMenu>\n <form>\n <SidebarGroup className=\"py-0\">\n <SidebarGroupContent className=\"relative\">\n <Label htmlFor=\"search\" className=\"sr-only\">\n Search\n </Label>\n <SidebarInput\n id=\"search\"\n placeholder=\"Search the docs...\"\n className=\"pl-8\"\n />\n <IconPlaceholder\n lucide=\"SearchIcon\"\n tabler=\"IconSearch\"\n hugeicons=\"SearchIcon\"\n phosphor=\"MagnifyingGlassIcon\"\n className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n />\n </SidebarGroupContent>\n </SidebarGroup>\n </form>\n </SidebarHeader>\n <SidebarContent>\n {data.navMain.map((item) => (\n <SidebarGroup key={item.title}>\n <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n <SidebarGroupContent>\n <SidebarMenu>\n {item.items.map((subItem) => (\n <SidebarMenuItem key={subItem.title}>\n <SidebarMenuButton\n render={<a href={subItem.url} />}\n isActive={subItem.isActive}\n >\n {subItem.title}\n </SidebarMenuButton>\n </SidebarMenuItem>\n ))}\n </SidebarMenu>\n </SidebarGroupContent>\n </SidebarGroup>\n ))}\n </SidebarContent>\n <SidebarRail />\n </Sidebar>\n <SidebarInset>\n <header className=\"flex h-16 shrink-0 items-center gap-2 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"
|
|
} |