4. File Explorer Tree

Build a File Explorer component in React that displays a hierarchical file/folder structure. Users should be able to expand/collapse folders and select files or folders.

Requirements

1. Display File Structure

• Render files and folders recursively
• Show folder icons that indicate expanded/collapsed state
• Show file icons (can be simple bullets or symbols)
• Use proper indentation to show hierarchy

2. Folder Expansion

• Clicking a folder should toggle its expanded/collapsed state
• Only show children when folder is expanded
• Folders should have a visual indicator (arrow/chevron) showing their state

3. Selection

• Clicking a file or folder should select it
• Show visual feedback for selected item
• Only one item can be selected at a time

4. Data Structure

interface FileNode {
  id: number;
  name: string;
  type: 'file' | 'folder';
  children?: FileNode[];
}

interface FileExplorerProps {
  data: FileNode[];
}

> Note: Use semantic HTML elements like <ul> and <li> for the tree structure. Avoid inline styles and use CSS classes instead.

5. Example Data

Here's an example of the data structure you'll be working with:

const exampleData: FileNode[] = [
  {
    id: 1,
    name: 'src',
    type: 'folder',
    children: [
      {
        id: 2,
        name: 'components',
        type: 'folder',
        children: [
          { id: 3, name: 'Button.tsx', type: 'file' },
          { id: 4, name: 'Card.tsx', type: 'file' },
        ],
      },
      { id: 5, name: 'App.tsx', type: 'file' },
    ],
  },
  {
    id: 6,
    name: 'package.json',
    type: 'file',
  },
];