Files

1'use client';
2
3import { Files } from '@/components/ui/files';
4
5type FileStatus = 'modified' | 'added' | 'untracked' | 'ignored' | undefined;
6
7interface FileNode {
8  type: 'file';
9  name: string;
10  status?: FileStatus;
11}
12
13interface FolderNode {
14  type: 'folder';
15  name: string;
16  status?: FileStatus;
17  children: TreeNode[];
18}
19
20type TreeNode = FileNode | FolderNode;
21
22const tree: TreeNode[] = [
23  {
24    type: 'folder',
25    name: 'src',
26    status: 'modified',
27    children: [
28      { type: 'file', name: 'main.tsx' },
29      { type: 'file', name: 'App.tsx', status: 'modified' },
30      { type: 'file', name: 'index.css' },
31      {
32        type: 'folder',
33        name: 'components',
34        children: [
35          {
36            type: 'folder',
37            name: 'ui',
38            status: 'modified',
39            children: [
40              { type: 'file', name: 'button.tsx' },
41              { type: 'file', name: 'card.tsx', status: 'modified' },
42              { type: 'file', name: 'toast.tsx', status: 'added' },
43            ],
44          },
45          { type: 'file', name: 'header.tsx' },
46          { type: 'file', name: 'footer.tsx' },
47        ],
48      },
49      {
50        type: 'folder',
51        name: 'hooks',
52        status: 'untracked',
53        children: [
54          { type: 'file', name: 'use-auth.ts', status: 'untracked' },
55          { type: 'file', name: 'use-toast.ts', status: 'untracked' },
56        ],
57      },
58      {
59        type: 'folder',
60        name: 'lib',
61        children: [
62          { type: 'file', name: 'cn.ts' },
63          { type: 'file', name: 'utils.ts' },
64        ],
65      },
66    ],
67  },
68  {
69    type: 'folder',
70    name: 'public',
71    children: [{ type: 'file', name: 'favicon.svg' }],
72  },
73  { type: 'file', name: '.env', status: 'ignored' },
74  { type: 'file', name: '.eslintrc.cjs' },
75  { type: 'file', name: 'index.html' },
76  { type: 'file', name: 'package.json', status: 'modified' },
77  { type: 'file', name: 'tsconfig.json' },
78  { type: 'file', name: 'vite.config.ts' },
79];
80
81function renderNode(node: TreeNode) {
82  if (node.type === 'file') {
83    return <Files.File key={node.name} name={node.name} status={node.status} />;
84  }
85  return (
86    <Files.Folder key={node.name} name={node.name} status={node.status}>
87      {node.children.map((child) => renderNode(child))}
88    </Files.Folder>
89  );
90}
91
92export function Default() {
93  return <Files defaultValue="src/components/ui">{tree.map((node) => renderNode(node))}</Files>;
94}