Container - Copy this React, Tailwind Component to your project
Prompt for Generating a File and Folder Management Component: Component Overview: Create a React component using Material UI that replicates the provided UI image. The component includes a top bar with a "New File" button, a folder icon button, a search bar, a list of folders, and files. Ensure the design closely matches the visual style in the image. Styles: Container: Use a dark theme with a black background (#000000). Divide into a top bar (buttons, search input) and a content area (folders, files). Top Bar: "New File" Button: Displays a "+" icon and "New File". White background (#FFFFFF) with black text (#000000), rounded corners. Folder Icon Button: Displays a folder icon with a "+" symbol, circular, same style as "New File". Search Input Field: Allows users to search files and folders. White background, dark text, rounded corners, full width below buttons. Folder and File List: Folders: Expandable with chevron icons. White text, bold, reveals contents when expanded. Files: File icon with truncated names if needed. Clicking triggers file viewing or download. Functionalities: "New File" Button: Opens a modal for creating a new file via: File Upload: Supports file validation. Custom Text File: Users enter a filename and content. Adds to file list. Folder Icon Button: Opens a modal for creating a new folder. Adds the folder to the list after entering a name. Search Input Field: Filters folders and files based on the user's input. Folder and File List: Folders: Expand/collapse to show/hide contents. Supports nested folders. Files: Click to open/download. Supports drag and drop for reordering. Data Structure: File Data: id, name, type, content, size, createdAt. Folder Data: id, name, items (array of file or subfolder IDs), createdAt. Additional Requirements: Responsiveness: Ensure the component maintains layout across different screen sizes. Error Handling: Include user friendly error messages for upload failures, invalid file types, etc. Accessibility: Use ARIA labels, keyboard navigation support.
