P D F Manager - Copy this React, Tailwind Component to your project

Prompt-Title:-"Detailed-UI-Design-for-a-Minimal-Black-and-White-PDF-File-Management-Web-App"-Prompt-Body:-Design-a-modern,-clean,-and-minimalistic-front-end-web-application-for-managing-PDF-files.-The-interface-must-be-intuitive,-responsive,-and-strictly-follow-a-black-and-white-theme.-Below-are-the-detailed-design-and-functionality-requirements:-1.-Overall-Aesthetic-and-Style-Color-Palette:-A-strictly-black-and-white-theme-with-no-additional-colors.-Black-elements-(text,-icons,-and-borders)-should-contrast-against-a-clean,-white-background.-Use-dark-gray-for-secondary-elements-(e.g.,-placeholder-text-or-less-important-labels).-Typography:-Use-a-sans-serif-font-like-Helvetica,-Arial,-or-Roboto.-Headings-should-be-bold-and-larger-in-size-to-create-a-clear-hierarchy.-Body-text-should-be-regular-weight-and-medium-size-for-readability.-Visual-Separation:-Avoid-shadows-or-excessive-borders—rely-on-spacing-and-thin-lines-for-separation-between-sections.-All-elements-should-feel-"airy"-with-plenty-of-white-space-to-reduce-visual-clutter.-2.-Top-Navigation-Bar-Placement:-The-navigation-bar-should-span-the-top-of-the-screen-horizontally,-occupying-about-10%-of-the-vertical-space.-Content-in-the-Navigation-Bar:-Left-Side:-A-small-area-for-a-monochrome-logo-or-brand-name-in-bold-black-text.-Center:-A-search-bar-for-users-to-locate-PDF-files.-The-search-bar-should-be-a-large-rectangle-with-a-thin-black-border.-Inside,-include-placeholder-text-that-says:-“Search-for-files-by-name,-date,-or-keyword.”-Add-a-small-magnifying-glass-icon-to-the-left-or-right-of-the-search-bar.-Right-Side:-Three-minimalist-icons:-A-settings-icon-(gear-shaped).-A-help-icon-(question-mark-or-speech-bubble).-A-user-profile-icon-(circle-or-silhouette).-3.-Drag-and-Drop-File-Upload-Area-Placement:-The-drag-and-drop-upload-zone-should-sit-directly-below-the-navigation-bar,-spanning-the-width-of-the-screen.-Design-of-the-Upload-Zone:-A-large,-rectangular-box-with-a-dashed-black-border,-centrally-aligned.-The-inside-of-the-box-should-display:-An-upload-icon-(e.g.,-a-cloud-with-an-arrow-pointing-up)-centered-in-the-box.-Text-below-the-icon-that-reads:-Main:-“Drag-&-Drop-your-PDF-files-here.”-Subtext:-“Or-click-to-upload.”-(in-smaller,-lighter-gray-font).-When-a-user-hovers-over-the-upload-zone,-the-dashed-border-should-thicken-slightly-or-invert-(white-on-black)-to-indicate-interactivity.-4.-Main-File-Display-Area-Size-and-Placement:-This-section-should-take-up-most-of-the-screen-below-the-upload-zone,-making-it-a-large-scrollable-area.-Align-it-centrally-with-some-padding-on-the-left-and-right-edges-to-create-balance.-File-Organization:-Files-should-be-displayed-in-a-list-view-or-grid-view-(user-should-toggle-between-these).-List-View-Design:-Each-file-appears-as-a-horizontal-row-with-the-following-details,-aligned-left-to-right:-File-Name:-Displayed-prominently-in-bold-black-text.-Upload-Date:-Displayed-in-smaller,-regular-black-text-next-to-the-filename.-File-Size-(optional):-Displayed-in-lighter-gray-text.-Icons:-On-hover,-show-small-black-icons-(aligned-to-the-far-right)-for-actions:-Download-(downward-arrow).-Share/Copy-Link-(link-icon).-Delete-(trash-icon).-Grid-View-Design:-Files-appear-as-rectangular-cards-arranged-in-rows-and-columns.-Each-card-contains:-A-small-PDF-icon-or-thumbnail-preview-of-the-file.-The-file-name-below-the-thumbnail.-Icons-for-download,-share,-and-delete,-displayed-on-hover-at-the-bottom-right-of-the-card.-5.-Filters-and-Sorting-Options-Filter-Section-Placement:-Place-a-horizontal-filter-bar-just-above-the-main-file-display-area.-Filter-Options:-Date-Range:-Dropdown-or-buttons-to-filter-files-by:-Today-This-Week-This-Month-Older-Sort-by:-File-Name-(A–Z,-Z–A)-Upload-Date-(Newest-First,-Oldest-First)-File-Size-(Smallest-to-Largest,-Largest-to-Smallest)-Group-by-Date:-Within-the-main-display-area,-files-should-be-grouped-under-clear-headers-like:-“Uploaded-Today”-“Uploaded-This-Week”-“Uploaded-Earlier”-6.-Responsive-Layout-For-Desktop:-Maintain-a-multi-column-layout-for-grid-view-and-wide-list-view.-Ensure-that-the-upload-area-and-file-display-take-up-the-full-width-of-the-screen.-For-Mobile:-Collapse-the-grid-view-into-a-single-column-list-view.-The-drag-and-drop-zone-should-shrink-to-a-simple-button-with-an-upload-icon-and-text:-“Tap-to-Upload.”-Filters-should-be-available-via-a-collapsible-dropdown-menu.-7.-Additional-Details-and-Functionality-File-Previews:-When-a-user-clicks-on-a-file,-open-a-PDF-preview-modal-in-the-center-of-the-screen-with-options-to-download-or-close.-Error/Success-Notifications:-Show-a-small-notification-bar-at-the-top-or-bottom-for-messages-like:-“File-uploaded-successfully.”-(in-green-or-bold-black-text).-“Error:-Only-PDF-files-are-allowed.”-(in-bold-red-text).-Empty-State-Design:-If-no-files-are-uploaded-yet,-display-a-message-in-the-main-display-area:-“No-files-found.”-(centered-with-a-small-upload-prompt-below).-Hover/Active-States:-All-interactive-elements-(icons,-buttons,-filters)-should-have-hover-states,-such-as-bolded-outlines,-inverted-colors,-or-subtle-underline-effects.-Expected-Deliverables:-A-fully-designed-UI-wireframe/mockup-showing-all-the-described-elements.-Both-desktop-and-mobile-versions-of-the-layout.-Clean,-minimalistic,-and-visually-intuitive-design-that-focuses-on-usability-and-simplicity.