File Management - Copy this React, Tailwind Component to your project

Design-Brief:-Modern-Web-Design-for-File-Management-Interface-We-are-creating-a-modern-file-management-interface-with-a-clean,-minimalistic-design-and-a-user-friendly-layout.-The-design-must-align-with-the-following-requirements:-Key-Features-File-Display-Section:-Display-a-list-of-files-in-a-structured-table-format-that-includes-the-following-columns:-File-Name:-Display-the-file-name-with-a-recognizable-icon-based-on-the-file-type-(e.g.,-PDF,-image,-etc.).-File-Size:-Show-the-size-of-the-file-in-a-compact-format-(e.g.,-KB,-MB,-GB).-Last-Modified:-Include-the-last-modified-date-and-time-for-each-file.-Actions:-Provide-a-single-action-button-for-deleting-the-file.-Use-a-clear-icon-(e.g.,-trash-can)-with-hover-effects-for-interactivity.-Search-and-Filter-Functionality:-Search-Bar:-Add-a-prominent-search-bar-at-the-top-of-the-file-list.-Allow-users-to-search-files-by-name,-date,-or-size-with-dynamic-filtering-as-they-type.-Filter-Button:-Include-a-simple-filter-button-beside-the-search-bar-to-refine-the-file-list-based-on-file-type,-size-range,-or-date-modified.-Use-a-dropdown-or-modal-for-filter-options.-File-Upload-Area:-A-drag-and-drop-upload-section-should-be-placed-above-the-file-list.-Include-clear-instructions-like-"Drag-your-files-here-or-click-to-upload."-Display-supported-file-types-and-size-limits-below-the-upload-section.-Upload-Progress-Bar:-Show-a-progress-bar-for-ongoing-uploads-beneath-the-drag-and-drop-section.-Include-an-option-to-cancel-the-upload-if-needed.-Design-Aesthetics-Theme:-The-overall-design-should-be-black-and-white-with-minimal-color-usage.-Use-subtle-accent-colors-(e.g.,-light-blue-or-purple)-for-actionable-elements-like-the-filter-button,-hover-effects,-and-icons.-Typography-and-Icons:-Maintain-a-clean-and-modern-sans-serif-font-for-readability.-Use-recognizable-and-simple-icons-for-actions-(e.g.,-trash-can-for-delete,-filter-for-filtering).-Layout:-The-interface-should-be-structured-into-clear-sections:-Top:-Search-bar-and-filter-button.-Middle:-File-upload-area-with-drag-and-drop-functionality.-Bottom:-File-list-table-with-pagination-or-scrollable-functionality-for-large-datasets.-User-Feedback:-Provide-clear-feedback-for-actions:-On-successful-upload:-Show-a-confirmation-message-or-checkmark.-On-delete:-Ask-for-a-confirmation-before-removing-a-file.-Responsiveness:-Ensure-the-design-is-optimized-for-desktop-and-tablet-use.-Allow-the-file-table-to-resize-gracefully,-and-adjust-the-layout-for-smaller-screens-(e.g.,-stacking-search-and-filter-elements).-Additional-Notes-Prioritize-simplicity-and-ease-of-use-while-ensuring-the-interface-looks-professional-and-modern.-Subtle-hover-animations-(e.g.,-buttons-or-table-rows)-can-enhance-interactivity-without-distracting-the-user.-Ensure-that-the-interface-is-scalable-for-adding-new-features-like-bulk-actions,-file-previews,-or-tags.-Deliver-a-design-that-is-visually-appealing,-consistent-with-modern-aesthetics,-and-intuitive-for-managing-files-effectively.