// title: Tree view with file actions "use client"; import { ChevronRightIcon, DownloadIcon, FileIcon, FolderIcon, TrashIcon, } from "lucide-react"; import { useState } from "react"; import { Button } from "@/registry/default/ui/button"; import { Card, CardContent, CardHeader } from "@/registry/default/ui/card"; import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "@/registry/default/ui/collapsible"; import { Item, ItemActions, ItemMedia, ItemTitle, } from "@/registry/default/ui/item"; import { Tabs, TabsList, TabsTrigger } from "@/registry/default/ui/tabs"; type FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }; const fileTree: FileTreeItem[] = [ { items: [ { items: [ { name: "button.tsx" }, { name: "card.tsx" }, { name: "dialog.tsx" }, ], name: "ui", }, { name: "login-form.tsx" }, ], name: "components", }, { items: [{ name: "utils.ts" }, { name: "api.ts" }], name: "lib", }, { items: [{ name: "use-debounce.ts" }, { name: "use-local-storage.ts" }], name: "hooks", }, { name: "app.tsx" }, { name: "package.json" }, ]; function TreeItem({ item, level = 0, selectedId, onSelect, }: { item: FileTreeItem; level?: number; selectedId?: string | null; onSelect?: (name: string) => void; }) { const isFolder = "items" in item; const isSelected = selectedId === item.name; if (isFolder) { return ( } > {item.name}

{item.items.map((child) => ( ))}

); } return ( onSelect?.(item.name)} style={{ paddingLeft: `${level * 12 + 9}px` }} > {item.name} ); } export function Pattern() { const [selectedId, setSelectedId] = useState(null); return (

Explorer Outline

{fileTree.map((item) => ( ))}

); }