collapsible-example.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "collapsible-example",
  "title": "Collapsible",
  "registryDependencies": [
    "button",
    "card",
    "collapsible",
    "field",
    "input",
    "tabs",
    "example"
  ],
  "files": [
    {
      "path": "registry/base-nova/examples/collapsible-example.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-nova/ui/card\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-nova/ui/collapsible\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-nova/ui/field\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/base-nova/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CollapsibleExample() {\n  return (\n    <ExampleWrapper>\n      <CollapsibleFileTree />\n      <CollapsibleSettings />\n    </ExampleWrapper>\n  )\n}\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\n\nfunction CollapsibleFileTree() {\n  const fileTree: FileTreeItem[] = [\n    {\n      name: \"components\",\n      items: [\n        {\n          name: \"ui\",\n          items: [\n            { name: \"button.tsx\" },\n            { name: \"card.tsx\" },\n            { name: \"dialog.tsx\" },\n            { name: \"input.tsx\" },\n            { name: \"select.tsx\" },\n            { name: \"table.tsx\" },\n          ],\n        },\n        { name: \"login-form.tsx\" },\n        { name: \"register-form.tsx\" },\n      ],\n    },\n    {\n      name: \"lib\",\n      items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n    },\n    {\n      name: \"hooks\",\n      items: [\n        { name: \"use-media-query.ts\" },\n        { name: \"use-debounce.ts\" },\n        { name: \"use-local-storage.ts\" },\n      ],\n    },\n    {\n      name: \"types\",\n      items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n    },\n    {\n      name: \"public\",\n      items: [\n        { name: \"favicon.ico\" },\n        { name: \"logo.svg\" },\n        { name: \"images\" },\n      ],\n    },\n    { name: \"app.tsx\" },\n    { name: \"layout.tsx\" },\n    { name: \"globals.css\" },\n    { name: \"package.json\" },\n    { name: \"tsconfig.json\" },\n    { name: \"README.md\" },\n    { name: \".gitignore\" },\n  ]\n\n  const renderItem = (fileItem: FileTreeItem) => {\n    if (\"items\" in fileItem) {\n      return (\n        <Collapsible key={fileItem.name}>\n          <CollapsibleTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"group hover:bg-accent hover:text-accent-foreground w-full justify-start transition-none\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"ChevronRightIcon\"\n              tabler=\"IconChevronRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"CaretRightIcon\"\n              remixicon=\"RiArrowRightSLine\"\n              className=\"transition-transform group-data-[state=open]:rotate-90\"\n            />\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n              phosphor=\"FolderIcon\"\n              remixicon=\"RiFolderLine\"\n            />\n            {fileItem.name}\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"style-lyra:ml-4 mt-1 ml-5\">\n            <div className=\"flex flex-col gap-1\">\n              {fileItem.items.map((child) => renderItem(child))}\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n      )\n    }\n    return (\n      <Button\n        key={fileItem.name}\n        variant=\"link\"\n        size=\"sm\"\n        className=\"text-foreground w-full justify-start gap-2\"\n      >\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n        <span>{fileItem.name}</span>\n      </Button>\n    )\n  }\n\n  return (\n    <Example title=\"File Tree\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-[16rem] gap-2\" size=\"sm\">\n        <CardHeader>\n          <Tabs defaultValue=\"explorer\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"explorer\">Explorer</TabsTrigger>\n              <TabsTrigger value=\"settings\">Outline</TabsTrigger>\n            </TabsList>\n          </Tabs>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-col gap-1\">\n            {fileTree.map((item) => renderItem(item))}\n          </div>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CollapsibleSettings() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Settings\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-xs\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Radius</CardTitle>\n          <CardDescription>\n            Set the corner radius of the element.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Collapsible\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            className=\"flex items-start gap-2\"\n          >\n            <FieldGroup className=\"grid w-full grid-cols-2 gap-2\">\n              <Field>\n                <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                  Radius X\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                  Radius Y\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <CollapsibleContent className=\"col-span-full grid grid-cols-subgrid gap-2\">\n                <Field>\n                  <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                    Radius X\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                    Radius Y\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n              </CollapsibleContent>\n            </FieldGroup>\n            <CollapsibleTrigger\n              render={<Button variant=\"outline\" size=\"icon\" />}\n            >\n              {isOpen ? (\n                <IconPlaceholder\n                  lucide=\"MinimizeIcon\"\n                  tabler=\"IconMinimize\"\n                  hugeicons=\"MinusSignIcon\"\n                  phosphor=\"MinusIcon\"\n                  remixicon=\"RiSubtractLine\"\n                />\n              ) : (\n                <IconPlaceholder\n                  lucide=\"MaximizeIcon\"\n                  tabler=\"IconMaximize\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n              )}\n            </CollapsibleTrigger>\n          </Collapsible>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}