Function FileTreeItem

web/src/components/IDEDemo.tsx:115–158

({
  item,
  depth = 0,
}: {
  item: FileItem
  depth?: number
})

}

const FileTreeItem = ({
  item,
  depth = 0,
}: {
  item: FileItem
  depth?: number
}) => {
  const [isOpen, setIsOpen] = useState(item.type === 'folder')

  return (
    <div>
      <div
        className={cn(
          'flex items-center text-sm text-zinc-300 hover:bg-zinc-800/50 rounded px-2 py-1 cursor-pointer group transition-colors duration-150',
          item.active && 'bg-zinc-800',
        )}
        style={{ paddingLeft: `${depth * 1.2 + 0.5}rem` }}
        onClick={() => setIsOpen(!isOpen)}
      >
        {item.type === 'folder' && (
          <div
            className="w-4 h-4 mr-1 transition-transform duration-200"
            style={{ transform: isOpen ? 'rotate(90deg)' : 'none' }}
          >
            <ChevronRight size={16} />
          </div>
        )}
        <FileIcon extension={item.extension} />
        <span>{item.name}</span>
      </div>
      {isOpen && item.children && (
        <div className="animate-slideDown">
          {item.children.map((child, index) => (
            <FileTreeItem
              key={child.name + index}
              item={child}
              depth={depth + 1}
            />
          ))}
        </div>
      )}
    </div>
  )
}

interface IDEDemoProps {
  className?: string