Documentation App - Copy this React, Tailwind Component to your project

You-said:-would-be-great-if-you-can-write-prompt-for-this-design-ChatGPT-said:-ChatGPT-Here’s-a-prompt-to-describe-the-design-style-and-layout-of-the-image-you’ve-provided.-This-will-help-you-recreate-a-similar-app-front-end-design:-Design-Prompt:-Elegant-and-Functional-Documentation-Search-App-Objective:-Design-a-sleek-and-dark-themed-user-interface-for-a-documentation-management-app.-The-layout-should-prioritize-ease-of-navigation,-functionality,-and-a-modern-aesthetic,-similar-to-cloud-storage-platforms-like-Google-Drive-or-Dropbox.-Core-Features:-Top-Navigation-Bar:-A-horizontal-bar-with-essential-utilities:-A-search-bar-placed-prominently,-aligned-slightly-to-the-left,-with-placeholder-text-like-"Search-files-or-folders...".-Action-buttons-(e.g.,-“Invite-members,”-“Upload,”-“Create-folder”)-represented-as-icons-with-labels-or-tooltips.-Account/profile-section-with-a-circular-avatar-or-initials-for-user-access,-along-with-notification-and-settings-icons.-Left-Sidebar-Navigation:-A-collapsible-menu-featuring:-Main-sections-such-as-"All-Files,"-"Shared,"-"Photos,"-"Signatures,"-etc.,-each-with-an-icon.-Quick-Access-area-for-starred-or-frequently-accessed-folders/files.-Option-for-adding-new-tags/categories-under-"Quick-Access."-File-Display-Area:-Centered-section-showing-files-with-options-for-both-grid-view-and-list-view-toggles.-Display-individual-file-cards-with:-Thumbnail-or-icon-for-the-file-type.-File-name,-type,-and-metadata-(e.g.,-size,-date-modified).-Hover-effects-that-highlight-the-selected-file-for-user-focus.-Include-a-“Suggested-for-you”-section-to-highlight-recently-or-frequently-accessed-files.-Action-Buttons-Panel:-Located-above-the-file-list-or-grid-for-quick-actions:-Buttons-for-“Share-selected,”-“Download,”-“Delete,”-and-more.-Dropdowns-for-advanced-actions-like-“Send-for-signature”-or-“Open-in.”-Footer-or-Progress-Section:-Subtle-prompts-for-tips-or-progress-(e.g.,-"Get-Started---Share-a-file-or-folder"),-displayed-in-a-non-intrusive-bottom-left-corner.-Visual-Style-Guide:-Color-Palette:-Primary:-Dark-shades-(e.g.,-black,-charcoal-gray)-for-the-background.-Accent:-Vibrant-tones-(e.g.,-green-for-upgrade-buttons-or-action-highlights).-Text:-Light-gray-or-white-for-readability-on-dark-backgrounds.-Typography:-Clean-sans-serif-fonts-like-Roboto,-Helvetica,-or-Open-Sans.-Hierarchy-with-larger-fonts-for-headers-and-smaller,-lighter-fonts-for-metadata.-Icons-&-Imagery:-Flat-or-minimalistic-icons-for-navigation-and-actions.-Use-subtle-hover-effects-(e.g.,-icons-lighting-up-or-changing-color).-Responsiveness:-Ensure-adaptability-for-both-desktop-and-mobile-views.-Sidebar-collapsibility-and-clear-scaling-for-file-display-cards.-Animations:-Smooth-transitions-for-opening-menus,-modal-overlays,-or-hovering-over-file-items.-Add-a-subtle-highlight-animation-for-notifications-or-buttons-on-interaction.-This-design-focuses-on-clarity-and-modern-appeal-while-maintaining-the-efficiency-needed-for-document-search-and-management.-Would-you-like-me-to-further-refine-or-expand-on-any-part-of-the-design-prompt?-You-said:-more-detailed-?-ChatGPT-said:-ChatGPT-Certainly!-Here’s-an-extremely-detailed-design-prompt-for-your-documentation-search-app:-Design-Prompt:-Modern-Documentation-Search-App-Interface-Purpose-and-Vision-Create-a-modern,-dark-themed-front-end-interface-for-a-documentation-search-and-management-app.-The-design-should-focus-on-user-friendliness,-aesthetic-appeal,-and-practicality,-inspired-by-leading-file-management-tools-like-Dropbox-and-Google-Drive.-It-should-cater-to-users-who-need-to-search,-organize,-and-collaborate-on-documents-seamlessly.-Layout-Breakdown-1.-Top-Navigation-Bar-Position:-Full-width-horizontal-bar-at-the-top-of-the-interface.-Elements:-Logo/Brand-Name:-Placed-on-the-far-left-corner,-subtle-and-minimal-(e.g.,-white-text-or-icon-on-a-dark-background).-Search-Bar:-Centered,-prominent,-and-wide-(60%-70%-of-the-width).-Placeholder-text:-“Search-files,-folders,-or-tags...”-Include-a-search-icon-inside-the-bar-on-the-left-side.-Optional-filters-accessed-via-a-dropdown-or-funnel-icon-(e.g.,-filter-by-file-type,-date,-or-tag).-Action-Buttons-(Aligned-Right):-Invite-Members-Button:-Rounded-button-with-text/icon-combo.-Quick-Upload-Button:-Icon-with-an-upward-arrow-for-file-upload.-Notifications-Icon:-Bell-icon-with-a-red-dot-for-new-activity.-Profile-Section:-Circular-avatar-showing-the-user’s-initials-or-photo,-with-a-dropdown-for-account-settings.-2.-Left-Sidebar-Navigation-Position:-Vertical,-spanning-the-height-of-the-screen-on-the-left-side.-Design:-Background:-Slightly-lighter-shade-than-the-main-background-for-contrast.-Icons:-Minimal,-flat-icons-paired-with-text-labels-for-clarity.-Sections-(all-aligned-vertically,-spaced-evenly):-Primary-Navigation:-"All-Files"-"Photos"-"Shared"-"Signatures"-"File-Requests"-"Deleted-Files"-Quick-Access:-Collapsible-section-with-frequently-accessed-or-starred-files.-Option-to-drag-and-drop-files-or-folders-into-this-section-for-instant-accessibility.-Tags/Custom-Categories:-Allow-users-to-add-tags-and-organize-their-content-based-on-personal-needs-(e.g.,-Work,-Personal,-Urgent).-3.-File-Display-Area-(Main-Content)-Position:-Center-panel,-occupying-the-majority-of-the-screen-space.-Features:-Header:-Section-title-(e.g.,-“All-Files”)-with-a-small-settings-icon-for-view-customization.-View-toggle-icons-(grid-or-list)-in-the-top-right-corner.-Content-Display:-Grid-View:-Display-file-cards-in-a-responsive-grid-format,-adjusting-based-on-screen-width.-List-View:-Display-files-in-a-clean,-table-like-layout-with-columns-for-file-name,-type,-size,-and-last-modified-date.-File-Card-Design:-Thumbnail-or-icon-(e.g.,-PDF-icon-or-file-preview-image).-File-name-displayed-prominently-beneath-the-thumbnail.-Metadata-(e.g.,-"Last-edited:-Jan-12,-2025")-displayed-in-smaller-text.-Hover-effect:-Card-slightly-elevates-or-highlights-when-hovered-over.-Suggested-Section:-A-dedicated-strip-at-the-top-(or-near-the-middle)-labeled-“Suggested-for-You.”-Highlights-recently-opened-or-frequently-used-documents.-4.-Action-Toolbar-Position:-Horizontal-toolbar-below-the-search-bar-or-at-the-top-of-the-file-display-area.-Buttons:-“Share-Selected”-“Download”-“Delete”-“Open-In...”-with-a-dropdown-for-applications.-“Send-for-Signature”-5.-Footer-Panel-(Optional)-Position:-Bottom-left-corner-of-the-screen.-Purpose:-Show-tips,-tutorials,-or-progress-reminders-(e.g.,-“Get-Started:-Share-a-file-or-folder”).-Design:-A-subtle-banner-or-widget-that-doesn’t-distract-the-user-from-the-primary-interface.-Include-dismiss-options-to-hide-once-completed.-Visual-Style-Guide-Color-Palette:-Backgrounds:-Primary-background:-Deep-charcoal-(#1a1a1a).-Sidebar-background:-Slightly-lighter-dark-gray-(#2a2a2a).-Text:-Primary-text:-Light-gray-(#f0f0f0).-Secondary-text/metadata:-Muted-gray-(#b0b0b0).-Accent-Colors:-Green-for-interactive-elements-like-“Upgrade”-or-confirmation-buttons-(#22c55e).-Blue-for-links-and-highlights-(#3b82f6).-Red-for-warnings-or-critical-actions-(#ef4444).-Hover-Effects:-Subtle-lightening-of-elements-when-hovered.-Glow-effect-on-actionable-buttons.-Typography:-Primary-Font:-Sans-serif-typeface-like-Roboto,-Helvetica,-or-Inter.-Font-Sizes:-Section-headers:-20px-24px,-bold.-File-names:-16px-18px.-Metadata:-12px-14px,-lighter-weight.-Icons-&-Visual-Elements:-Use-flat,-modern-icons-from-libraries-like-Material-Design-or-Font-Awesome.-File-type-icons-should-be-consistent-(e.g.,-PDF,-Word,-Excel)-and-visually-distinct.-Add-small-badges-or-tags-for-special-file-states-(e.g.,-“Shared,”-“New,”-or-“Starred”).-Interaction-and-Animation:-Transitions:-Smooth-transitions-for-hover-effects,-sidebar-toggles,-and-modal-windows.-Example:-When-hovering-over-a-file-card,-it-subtly-elevates,-with-a-shadow-effect-appearing-beneath-it.-Modal-Views:-Open-files-in-an-overlay-modal-with-basic-actions-(e.g.,-download,-share,-or-view-full-file).-Drag-and-Drop-Upload:-Enable-users-to-drag-files-onto-specific-areas-(e.g.,-folders-or-quick-access)-for-organization.-Responsiveness:-Ensure-the-layout-is-fully-adaptive:-Desktop-view:-Sidebar-always-visible-with-collapsible-options.-Tablet-view:-Sidebar-collapses-by-default,-accessible-via-a-hamburger-menu.-Mobile-view:-Focus-on-search-bar-and-file-cards,-with-collapsible-navigation.-Mood-and-Feel-The-app-should-feel-modern,-professional,-and-inviting.-It-should-blend-practicality-with-aesthetic-minimalism.-Users-should-feel-empowered-to-navigate-and-organize-their-files-effortlessly.