A client-side React component that renders a full-featured file manager UI, combining breadcrumb navigation, an action bar, search input, and a file table into a single composable interface. ## Key Components - **`FileManager`** — Main exported component that orchestrates all sub-components - **`breadcrumbItems`** (`useMemo`) — Derives structured breadcrumb items from `currentPath`, handling both Unix (`/`) and Windows (`\`, drive letters) path formats - **`handleFolderOpen`** — Constructs the new navigation path when a folder is opened, respecting path separator conventions - **`handleBreadcrumbClick`** — Calls both `onBreadcrumbClick` and `onNavigate` callbacks on breadcrumb interaction - **Sub-components used:** `FileManagerBreadcrumb`, `FileManagerActionBar`, `FileManagerTable`, `Input` ## Key Props | Prop | Type | Description | |------|------|-------------| | `files` | `FileItem[]` | List of files/folders to display | | `currentPath` | `string` | Active directory path (Unix or Windows) | | `selectedFiles` | `string[]` | Array of selected file IDs | | `showCheckboxes` | `boolean` | Toggle selection checkboxes (default: `true`) | | `showSearch` | `boolean` | Toggle search input (default: `true`) | | `showActions` | `boolean` | Toggle action bar (default: `true`) | | `canPaste` | `boolean` | Enables paste action in action bar | | `onNavigate` | `(path: string) => void` | Called on folder open or breadcrumb click | | `onFileAction` | `(action: string) => void` | Handles copy, cut, paste, upload, new-folder | ## Usage Example ```typescript import { FileManager } from './file-manager' function MyFileBrowser() { const [currentPath, setCurrentPath] = useState('/') const [selected, setSelected] = useState([]) return ( setSelected(prev => checked ? [...prev, id] : prev.filter(f => f !== id) ) } onSelectAll={(all) => setSelected(all ? fileList.map(f => f.id) : [])} onFileAction={(action) => console.log('Action:', action)} /> ) } ```