File Manager Component - Copy this React, Tailwind Component to your project
Generate a responsive React component using TypeScript and TailwindCSS. The component should be divided into two sections: Folders Section (2/3 of the component): Display a grid layout of folders, each represented as a card with a visually appealing design. Each folder card should have a dropdown menu with actions like 'Edit', 'Delete', and similar options. When a folder is expanded, display up to 3 associated files with their names and a button to open a modal displaying all files of the employee. Ensure smooth animations for folder expansion and a clean, user friendly design. Details Section (1/3 of the component): Show detailed information about the files and folders, including: Total number of files. Total number of folders. Total size of files. Size breakdown per folder. Include donut charts to visualize: The proportion of space occupied by files. The proportion of space occupied by folders. Use a minimalist and clean design for the charts and data display. Design Considerations: Use a modern and visually pleasing UI/UX approach with TailwindCSS for styling. Make the component responsive, ensuring it looks good on both desktop and mobile views. Optimize for accessibility (e.g., keyboard navigation and ARIA roles). Provide the code for the component, including any necessary child components (e.g., folder card, modal, charts), and ensure proper modularization and state management using React hooks.
