file-tree-custom-icons-demo

1import { FileCode, FileJson, Image, Package, Settings } from "lucide-react";
2import { FileTree } from "@/registry/default/ui/file-tree";
3 
4const customIconsTreeData = [
5  {
6    id: "src",
7    name: "src",
8    type: "folder" as const,
9    children: [
10      {
11        id: "components",
12        name: "components",
13        type: "folder" as const,
14        children: [
15          {
16            id: "button",
17            name: "Button.tsx",
18            type: "file" as const,
19            icon: <FileCode className="h-4 w-4 text-blue-400" />,
20          },
21          {
22            id: "input",
23            name: "Input.tsx",
24            type: "file" as const,
25            icon: <FileCode className="h-4 w-4 text-blue-400" />,
26          },
27        ],
28      },
29      {
30        id: "utils",
31        name: "utils.ts",
32        type: "file" as const,
33        icon: <FileCode className="h-4 w-4 text-yellow-400" />,
34      },
35    ],
36  },
37  {
38    id: "public",
39    name: "public",
40    type: "folder" as const,
41    children: [
42      {
43        id: "logo",
44        name: "logo.svg",
45        type: "file" as const,
46        icon: <Image className="h-4 w-4 text-pink-400" />,
47      },
48      {
49        id: "favicon",
50        name: "favicon.ico",
51        type: "file" as const,
52        icon: <Image className="h-4 w-4 text-pink-400" />,
53      },
54    ],
55  },
56  {
57    id: "package",
58    name: "package.json",
59    type: "file" as const,
60    icon: <Package className="h-4 w-4 text-green-400" />,
61  },
62  {
63    id: "tsconfig",
64    name: "tsconfig.json",
65    type: "file" as const,
66    icon: <FileJson className="h-4 w-4 text-yellow-500" />,
67  },
68  {
69    id: "vite",
70    name: "vite.config.ts",
71    type: "file" as const,
72    icon: <Settings className="h-4 w-4 text-purple-400" />,
73  },
74];
75 
76export default function FileTreeCustomIconsDemo() {
77  return (
78    <div className="flex flex-col gap-3">
79      <h3 className="font-medium text-sm">File Tree with Custom Icons</h3>
80      <FileTree data={customIconsTreeData} />
81    </div>
82  );
83}