file-tree

1import { File, Folder, Tree } from "@/components/magicui/file-tree";
2 
3export function FileTreeDemo() {
4  return (
5    <div className="relative flex h-[300px] w-1/2 flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl">
6      <Tree
7        className="overflow-hidden rounded-md bg-background p-2"
8        initialSelectedId="7"
9        initialExpandedItems={[
10          "1",
11          "2",
12          "3",
13          "4",
14          "5",
15          "6",
16          "7",
17          "8",
18          "9",
19          "10",
20          "11",
21        ]}
22        elements={ELEMENTS}
23      >
24        <Folder element="src" value="1">
25          <Folder value="2" element="app">
26            <File value="3">
27              <p>layout.tsx</p>
28            </File>
29            <File value="4">
30              <p>page.tsx</p>
31            </File>
32          </Folder>
33          <Folder value="5" element="components">
34            <Folder value="6" element="ui">
35              <File value="7">
36                <p>button.tsx</p>
37              </File>
38            </Folder>
39            <File value="8">
40              <p>header.tsx</p>
41            </File>
42            <File value="9">
43              <p>footer.tsx</p>
44            </File>
45          </Folder>
46          <Folder value="10" element="lib">
47            <File value="11">
48              <p>utils.ts</p>
49            </File>
50          </Folder>
51        </Folder>
52      </Tree>
53    </div>
54  );
55}
56 
57const ELEMENTS = [
58  {
59    id: "1",
60    isSelectable: true,
61    name: "src",
62    children: [
63      {
64        id: "2",
65        isSelectable: true,
66        name: "app",
67        children: [
68          {
69            id: "3",
70            isSelectable: true,
71            name: "layout.tsx",
72          },
73          {
74            id: "4",
75            isSelectable: true,
76            name: "page.tsx",
77          },
78        ],
79      },
80      {
81        id: "5",
82        isSelectable: true,
83        name: "components",
84        children: [
85          {
86            id: "6",
87            isSelectable: true,
88            name: "header.tsx",
89          },
90          {
91            id: "7",
92            isSelectable: true,
93            name: "footer.tsx",
94          },
95        ],
96      },
97      {
98        id: "8",
99        isSelectable: true,
100        name: "lib",
101        children: [
102          {
103            id: "9",
104            isSelectable: true,
105            name: "utils.ts",
106          },
107        ],
108      },
109    ],
110  },
111];