'use client'; import { TreeExpander, TreeIcon, TreeLabel, TreeNode, TreeNodeContent, TreeNodeTrigger, TreeProvider, TreeView, } from '@/components/ui/tree'; import { type TreeNodeData, buildSimpleTree, getFileIcon } from '@/lib/tree-structure'; import { useState } from 'react'; import { ClientPreCode } from '../website/code-components/client-pre-code'; export function TreeCodeViewer({ files, }: { files: { id: string; fileName: string; virtualPath: string[]; ext: string; raw: string; html: string; }[]; }) { const tree = buildSimpleTree(files); console.log('tree', tree); const [selectedId, setSelectedId] = useState(files[0]?.id); const fileMap = Object.fromEntries(files.map((f) => [f.id, f])); const selectedFile = selectedId ? fileMap[selectedId] : null; return (

{/* LEFT */} { if (ids[0]) setSelectedId(ids[0]); }} className='border-r dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900' > {/* RIGHT */}

{selectedFile ? ( ) : (

Select a file

)}

); } function RenderTree({ nodes, level = 0 }: { nodes: TreeNodeData[]; level?: number }) { return ( <> {nodes.map((node, index) => { const isLast = index === nodes.length - 1; // 📁 FOLDER if (node.type === 'folder') { return ( {node.name} ); } // 📄 FILE return ( {node.name} ); })} ); }