file-tree-basic-demo

1import { FileTree } from "@/registry/default/ui/file-tree";
2 
3const basicTreeData = [
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        ],
17      },
18      { id: "utils", name: "utils.ts", type: "file" as const },
19    ],
20  },
21  { id: "package", name: "package.json", type: "file" as const },
22  { id: "readme", name: "README.md", type: "file" as const },
23];
24 
25export default function FileTreeBasicDemo() {
26  return (
27    <div className="flex flex-col gap-3">
28      <h3 className="font-medium text-sm">Basic File Tree</h3>
29      <FileTree data={basicTreeData} />
30    </div>
31  );
32}