"use client"; import React, { useState } from 'react'; interface TreeNodeData { name: string; type: string; path: string; subfolders: number; size: number; files: number; children?: TreeNodeData[]; } interface TreeNodeProps { node: TreeNodeData; rootSize: number; } const TreeNode: React.FC = ({ node, rootSize }) => { const [isExpanded, setIsExpanded] = useState(false); const toggleExpand = () => { setIsExpanded(!isExpanded); }; const percentage = (node.size / rootSize) * 100; return (
{node.name} Subfolders: {node.subfolders} Files: {node.files}
70 ? 'red' : percentage > 40 ? 'yellow' : ''}`} style={{ width: `${percentage}%` }} >
{isExpanded && node.children && (
{node.children.map((child) => ( ))}
)}
); }; export default TreeNode;