file-tree-expandable-demo

1import { FileTree } from "@/registry/default/ui/file-tree";
2 
3const expandableTreeData = [
4  {
5    id: "src",
6    name: "src",
7    type: "folder" as const,
8    children: [
9      {
10        id: "components",
11        name: "components",
12        type: "folder" as const,
13        children: [
14          { id: "button", name: "Button.tsx", type: "file" as const },
15          { id: "input", name: "Input.tsx", type: "file" as const },
16          { id: "card", name: "Card.tsx", type: "file" as const },
17        ],
18      },
19      {
20        id: "hooks",
21        name: "hooks",
22        type: "folder" as const,
23        children: [
24          { id: "use-theme", name: "use-theme.ts", type: "file" as const },
25          { id: "use-mobile", name: "use-mobile.ts", type: "file" as const },
26        ],
27      },
28      { id: "utils", name: "utils.ts", type: "file" as const },
29    ],
30  },
31  {
32    id: "public",
33    name: "public",
34    type: "folder" as const,
35    children: [
36      { id: "favicon", name: "favicon.ico", type: "file" as const },
37      { id: "logo", name: "logo.svg", type: "file" as const },
38    ],
39  },
40  { id: "package", name: "package.json", type: "file" as const },
41  { id: "readme", name: "README.md", type: "file" as const },
42];
43 
44export default function FileTreeExpandableDemo() {
45  return (
46    <div className="flex flex-col gap-3">
47      <h3 className="font-medium text-sm">Expandable File Tree</h3>
48      <FileTree
49        data={expandableTreeData}
50        defaultExpandedIds={["src", "components"]}
51      />
52    </div>
53  );
54}