Files

Un componente de árbol de archivos interactivo para mostrar estructuras jerárquicas de carpetas y archivos.

srcM

main.tsx

App.tsxM

index.css

components

uiM

button.tsx

card.tsxM

toast.tsxA

header.tsx

footer.tsx

hooksU

lib

public

.envI

.eslintrc.cjs

index.html

package.jsonM

tsconfig.json

vite.config.ts

files-demo.tsx

1'use client';
2
3import { File, Files, Folder } from '@/components/ui/files';
4
5export function FilesDemo() {
6  return (
7    <Files defaultValue="src/components/ui">
8      <Folder name="src" status="modified">
9        <File name="main.tsx" />
10        <File name="App.tsx" status="modified" />
11        <File name="index.css" />
12
13        <Folder name="components">
14          <Folder name="ui" status="modified">
15            <File name="button.tsx" />
16            <File name="card.tsx" status="modified" />
17            <File name="toast.tsx" status="added" />
18          </Folder>
19
20          <File name="header.tsx" />
21          <File name="footer.tsx" />
22        </Folder>
23
24        <Folder name="hooks" status="untracked">
25          <File name="use-auth.ts" status="untracked" />
26          <File name="use-toast.ts" status="untracked" />
27        </Folder>
28
29        <Folder name="lib">
30          <File name="cn.ts" />
31          <File name="utils.ts" />
32        </Folder>
33      </Folder>
34
35      <Folder name="public">
36        <File name="favicon.svg" />
37      </Folder>
38
39      <File name=".env" status="ignored" />
40      <File name=".eslintrc.cjs" />
41      <File name="index.html" />
42      <File name="package.json" status="modified" />
43      <File name="tsconfig.json" />
44      <File name="vite.config.ts" />
45    </Files>
46  );
47}

AnteriorDropdown Menu SiguienteSheet