Collapsible

import { Button } from "@/components/button"import { Card, CardContent, CardHeader } from "@/components/card"import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/collapsible"import { Tabs, TabsList, TabsTrigger } from "@/components/tabs"import { ChevronRightIcon, FileIcon, FolderIcon } from "lucide-react"type FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }export function CollapsibleFileTree() {  const fileTree: FileTreeItem[] = [    {      name: "components",      items: [        {          name: "ui",          items: [            { name: "button.tsx" },            { name: "card.tsx" },            { name: "dialog.tsx" },            { name: "input.tsx" },            { name: "select.tsx" },            { name: "table.tsx" },          ],        },        { name: "login-form.tsx" },        { name: "register-form.tsx" },      ],    },    {      name: "lib",      items: [{ name: "utils.ts" }, { name: "cn.ts" }, { name: "api.ts" }],    },    {      name: "hooks",      items: [        { name: "use-media-query.ts" },        { name: "use-debounce.ts" },        { name: "use-local-storage.ts" },      ],    },    {      name: "types",      items: [{ name: "index.d.ts" }, { name: "api.d.ts" }],    },    {      name: "public",      items: [        { name: "favicon.ico" },        { name: "logo.svg" },        { name: "images" },      ],    },    { name: "app.tsx" },    { name: "layout.tsx" },    { name: "globals.css" },    { name: "package.json" },    { name: "tsconfig.json" },    { name: "README.md" },    { name: ".gitignore" },  ]  const renderItem = (fileItem: FileTreeItem) => {    if ("items" in fileItem) {      return (        <Collapsible key={fileItem.name}>          <CollapsibleTrigger asChild>            <Button              variant="ghost"              size="sm"              className="group w-full justify-start transition-none hover:bg-accent hover:text-accent-foreground"            >              <ChevronRightIcon className="transition-transform group-data-[state=open]:rotate-90" />              <FolderIcon />              {fileItem.name}            </Button>          </CollapsibleTrigger>          <CollapsibleContent className="mt-1 ml-5 style-lyra:ml-4">            <div className="flex flex-col gap-1">              {fileItem.items.map((child) => renderItem(child))}            </div>          </CollapsibleContent>        </Collapsible>      )    }    return (      <Button        key={fileItem.name}        variant="link"        size="sm"        className="w-full justify-start gap-2 text-foreground"      >        <FileIcon />        <span>{fileItem.name}</span>      </Button>    )  }  return (    <div className="flex flex-col gap-6 items-center">      <Card className="mx-auto w-full max-w-[16rem] gap-2" size="sm">        <CardHeader>          <Tabs defaultValue="explorer">            <TabsList className="w-full">              <TabsTrigger value="explorer">Explorer</TabsTrigger>              <TabsTrigger value="settings">Outline</TabsTrigger>            </TabsList>          </Tabs>        </CardHeader>        <CardContent>          <div className="flex flex-col gap-1">            {fileTree.map((item) => renderItem(item))}          </div>        </CardContent>      </Card>    </div>  )}

import * as React from "react"import { Button } from "@/components/button"import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/card"import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/collapsible"import { Field, FieldGroup, FieldLabel } from "@/components/field"import { Input } from "@/components/input"import { MaximizeIcon, MinimizeIcon } from "lucide-react"export function CollapsibleSettings() {  const [isOpen, setIsOpen] = React.useState(false)  return (    <div className="flex flex-col gap-6 items-center">      <Card className="mx-auto w-full max-w-xs" size="sm">        <CardHeader>          <CardTitle>Radius</CardTitle>          <CardDescription>            Set the corner radius of the element.          </CardDescription>        </CardHeader>        <CardContent>          <Collapsible            open={isOpen}            onOpenChange={setIsOpen}            className="flex items-start gap-2"          >            <FieldGroup className="grid w-full grid-cols-2 gap-2">              <Field>                <FieldLabel htmlFor="radius-x" className="sr-only">                  Radius X                </FieldLabel>                <Input id="radius" placeholder="0" defaultValue={0} />              </Field>              <Field>                <FieldLabel htmlFor="radius-y" className="sr-only">                  Radius Y                </FieldLabel>                <Input id="radius" placeholder="0" defaultValue={0} />              </Field>              <CollapsibleContent className="col-span-full grid grid-cols-subgrid gap-2">                <Field>                  <FieldLabel htmlFor="radius-x" className="sr-only">                    Radius X                  </FieldLabel>                  <Input id="radius" placeholder="0" defaultValue={0} />                </Field>                <Field>                  <FieldLabel htmlFor="radius-y" className="sr-only">                    Radius Y                  </FieldLabel>                  <Input id="radius" placeholder="0" defaultValue={0} />                </Field>              </CollapsibleContent>            </FieldGroup>            <CollapsibleTrigger asChild>              <Button variant="outline" size="icon">                {isOpen ? (                  <MinimizeIcon />                ) : (                  <MaximizeIcon />                )}              </Button>            </CollapsibleTrigger>          </Collapsible>        </CardContent>      </Card>    </div>  )}