File Explorer

Build a file explorer: a nested folder hierarchy where clicking a folder expands or collapses its contents. The data is a tree — folders contain children, which may themselves be folders — and the natural way to render a tree is recursion: a component that renders a node and calls itself for each child.

Signature

type FileNode = { name: string; children?: FileNode[] };

// A self-contained component. No props.
function App(): JSX.Element;

A node with a children array is a folder; one without is a file.

Examples

▸ src              click ▸ src      ▾ src
▸ public      →                       ▸ components
📄 package.json                        📄 index.ts
                                     ▸ public
                                     📄 package.json

expanding "src" then "components" reveals Button.tsx and Modal.tsx,
each one level deeper than its parent.

Notes

• Recursion mirrors the data. A tree of nodes → a component that renders itself for each child.
• One source of open state. Track open folder paths in a Set; a folder is open iff its path is in the set.
• Files vs folders. children present → folder (expandable); absent → leaf file.
• Out of scope. ARIA tree roles (File Explorer II) and flat rendering (File Explorer III).