"use client"; import React, { useState } from "react"; interface FileTreeItem { name: string; type: "folder" | "file"; icon?: React.ComponentType; children?: FileTreeItem[]; } interface FolderIconProps { isOpen: boolean; } interface ChevronIconProps { isOpen: boolean; } interface TreeIconProps { item: FileTreeItem; isOpen: boolean; } interface TreeNodeProps { item: FileTreeItem; selectedFile: string; onFileSelect: (fileName: string) => void; } const FileIcon = () => ( ); const JsIcon = () => ( ); const HtmlIcon = () => ( ); const CssIcon = () => ( ); const ReactIcon = () => ( ); const FolderIcon: React.FC = ({ isOpen }) => ( ); const ChevronIcon: React.FC = ({ isOpen }) => ( ); const fileTreeData: FileTreeItem[] = [ { name: "public", type: "folder", children: [ { name: "index.html", type: "file" }, { name: "favicon.ico", type: "file" }, ], }, { name: "src", type: "folder", children: [ { name: "components", type: "folder", children: [ { name: "Button.jsx", type: "file", icon: ReactIcon }, { name: "Modal.js", type: "file" }, ], }, { name: "hooks", type: "folder", children: [{ name: "useFetch.js", type: "file" }], }, { name: "App.jsx", type: "file", icon: ReactIcon }, { name: "index.js", type: "file" }, { name: "styles.css", type: "file" }, ], }, { name: "package.json", type: "file" }, { name: "README.md", type: "file" }, ]; const TreeIcon: React.FC = ({ item, isOpen }) => { if (item.icon) { const IconComponent = item.icon; return ; } if (item.type === "folder") { return ; } if (item.name.endsWith(".js") || item.name.endsWith(".jsx")) return ; if (item.name.endsWith(".html")) return ; if (item.name.endsWith(".css")) return ; return ; }; const TreeNode: React.FC = ({ item, selectedFile, onFileSelect, }) => { const isFolder = item.type === "folder"; const [isOpen, setIsOpen] = useState(isFolder); const handleToggle = () => { if (isFolder) { setIsOpen(!isOpen); } else { onFileSelect(item.name); } }; const isSelected = !isFolder && selectedFile === item.name; return (

{isFolder ? ( ) : (

)}

{item.name}

{isFolder && isOpen && item.children && item.children.map((child: FileTreeItem) => ( ))}

); }; export default function FileTree() { const [selectedFile, setSelectedFile] = useState("App.jsx"); const handleFileSelect = (fileName: string) => { setSelectedFile(fileName); console.log(`Selected file: ${fileName}`); }; return (

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

); }

File Tree

Advanced Example

Basic Example