File Tree

"use client";

import {
  FileTree,
  FileTreeItem,
  FileTreeList,
} from "@/components/ui/file-tree";
import { File, FileText, Image } from "lucide-react";

export default function FileTreePreview() {
  return (
    <FileTree
      className="w-full max-w-sm"
      defaultExpandedIds={["documents", "projects", "project1"]}
      defaultSelectedId="index"
    >
      <FileTreeList>
        <FileTreeItem nodeId="documents" label="Documents" hasChildren>
          <FileTreeItem nodeId="projects" label="Projects" hasChildren>
            <FileTreeItem nodeId="project1" label="Project 1" hasChildren>
              <FileTreeItem nodeId="readme" label="README.md" icon={<FileText className="size-4.5" />} />
              <FileTreeItem nodeId="index" label="index.tsx" icon={<FileText className="size-4.5" />} highlight />
            </FileTreeItem>
          </FileTreeItem>
          <FileTreeItem nodeId="images" label="Images" hasChildren>
            <FileTreeItem nodeId="logo" label="logo.png" icon={<Image className="size-4.5" />} />
            <FileTreeItem nodeId="banner" label="banner.jpg" icon={<Image className="size-4.5" />} />
          </FileTreeItem>
        </FileTreeItem>
        <FileTreeItem nodeId="notes" label="notes.md" icon={<File className="size-4.5" />} />
      </FileTreeList>
    </FileTree>
  );
}