Collapsible

1"use client"
2 
3import * as React from "react"
4 
5import {
6  Example,
7  ExampleWrapper,
8} from "@/registry/bases/radix/components/example"
9import { Button } from "@/registry/bases/radix/ui/button"
10import {
11  Card,
12  CardContent,
13  CardDescription,
14  CardHeader,
15  CardTitle,
16} from "@/registry/bases/radix/ui/card"
17import {
18  Collapsible,
19  CollapsibleContent,
20  CollapsibleTrigger,
21} from "@/registry/bases/radix/ui/collapsible"
22import { Field, FieldGroup, FieldLabel } from "@/registry/bases/radix/ui/field"
23import { Input } from "@/registry/bases/radix/ui/input"
24import { Tabs, TabsList, TabsTrigger } from "@/registry/bases/radix/ui/tabs"
25import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
26 
27export default function CollapsibleExample() {
28  return (
29    <ExampleWrapper>
30      <CollapsibleFileTree />
31      <CollapsibleSettings />
32    </ExampleWrapper>
33  )
34}
35 
36type FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }
37 
38function CollapsibleFileTree() {
39  const fileTree: FileTreeItem[] = [
40    {
41      name: "components",
42      items: [
43        {
44          name: "ui",
45          items: [
46            { name: "button.tsx" },
47            { name: "card.tsx" },
48            { name: "dialog.tsx" },
49            { name: "input.tsx" },
50            { name: "select.tsx" },
51            { name: "table.tsx" },
52          ],
53        },
54        { name: "login-form.tsx" },
55        { name: "register-form.tsx" },
56      ],
57    },
58    {
59      name: "lib",
60      items: [{ name: "utils.ts" }, { name: "cn.ts" }, { name: "api.ts" }],
61    },
62    {
63      name: "hooks",
64      items: [
65        { name: "use-media-query.ts" },
66        { name: "use-debounce.ts" },
67        { name: "use-local-storage.ts" },
68      ],
69    },
70    {
71      name: "types",
72      items: [{ name: "index.d.ts" }, { name: "api.d.ts" }],
73    },
74    {
75      name: "public",
76      items: [
77        { name: "favicon.ico" },
78        { name: "logo.svg" },
79        { name: "images" },
80      ],
81    },
82    { name: "app.tsx" },
83    { name: "layout.tsx" },
84    { name: "globals.css" },
85    { name: "package.json" },
86    { name: "tsconfig.json" },
87    { name: "README.md" },
88    { name: ".gitignore" },
89  ]
90 
91  const renderItem = (fileItem: FileTreeItem) => {
92    if ("items" in fileItem) {
93      return (
94        <Collapsible key={fileItem.name}>
95          <CollapsibleTrigger asChild>
96            <Button
97              variant="ghost"
98              size="sm"
99// … truncated