File Tree

1import { FileTree, type TreeNode } from "@/components/ui/file-tree";
2
3const files: TreeNode[] = [
4  { id: "app", name: "app", children: [{ id: "app/page.tsx", name: "page.tsx" }, { id: "app/globals.css", name: "globals.css" }] },
5  { id: "components", name: "components", children: [{ id: "components/ui/button.tsx", name: "button.tsx" }] },
6  { id: "package.json", name: "package.json" },
7];
8
9export function Explorer() {
10  return (
11    <FileTree
12      aria-label="Project files"
13      data={files}
14      defaultExpandedIds={["app"]}
15      onSelect={(node) => console.log(node.id)}
16    />
17  );
18}