P D F Viewer - Copy this React, Tailwind Component to your project
Design-Brief:-Modern-Web-Design-for-a-PDF-Viewer-Application-We-are-creating-a-modern-and-minimalist-web-application-for-managing-and-viewing-PDFs,-with-a-dual-column-layout-and-space-for-additional-features.-The-design-must-emphasize-simplicity,-a-black-and-white-color-theme,-and-seamless-user-interaction.-Core-Features-PDF-Viewing-and-Dual-Column-Layout-Left-Column:-A-PDF-Viewer-that-displays-the-selected-PDF.-Supports-page-navigation-with-clear,-minimal-controls-(e.g.,-next/previous-buttons).-Includes-a-drag-and-drop-area-for-uploading-PDFs,-with-visual-feedback-(e.g.,-dashed-border,-highlight-on-hover).-Default-state:-A-placeholder-with-instructions-to-drag-and-drop-or-select-a-file.-Right-Column:-A-placeholder-section-for-future-functionality,-labeled-as-"Parsing-Result".-The-placeholder-must-be-visually-neutral-and-maintain-balance-with-the-PDF-Viewer.-Top-Bar-for-Actions-Purpose:-Provide-quick-access-to-actions-and-file-management.-Components:-Dropdown-Menu:-Allows-users-to-select-a-PDF-to-view.-Button:-A-prominent-"Convert-PDF"-button-to-trigger-a-conversion-function.-PDF-Selection-Panel-A-collapsible-side-panel-for-browsing-available-PDFs.-Displays-a-searchable-list-of-PDF-files-with-essential-details-(e.g.,-file-name,-size).-Supports-drag-and-drop-for-uploading-new-PDFs-directly-into-the-panel.-The-panel-should-remain-hidden-unless-explicitly-opened-by-the-user-to-preserve-screen-space.-Design-Aesthetics-Theme-The-design-will-follow-a-black-and-white-color-scheme,-with-minimal-accent-colors-(e.g.,-soft-blue-or-gray)-for-actionable-elements-like-buttons-and-hover-effects.-Ensure-the-interface-is-clean,-modern,-and-visually-appealing,-avoiding-clutter.-Typography-and-Icons-Use-a-modern-sans-serif-font-with-consistent-spacing-for-readability.-Integrate-lightweight-icons-for-actions-(e.g.,-next/previous-arrows,-upload,-close).-Layout-and-Responsiveness-The-layout-must-adapt-gracefully-to-different-screen-sizes:-On-large-screens:-Dual-column-layout-with-a-collapsible-side-panel.-On-smaller-screens:-Stack-columns-vertically-and-replace-the-side-panel-with-a-dropdown-or-modal-for-file-selection.-User-Experience-Intuitive-Navigation:-Ensure-all-interactions-(file-selection,-page-navigation,-uploads)-are-straightforward-and-require-minimal-effort.-Feedback-and-State-Changes:-Provide-real-time-visual-feedback-for-drag-and-drop-uploads,-button-presses,-and-active-selections.-Accessibility:-Maintain-a-high-contrast-ratio-for-text-and-interactive-elements,-and-ensure-keyboard-navigation-is-supported.-Additional-Notes-Focus-on-scalability:-The-placeholder-area-and-panel-design-must-allow-for-future-features-without-requiring-significant-redesigns.-Subtle-animations-(e.g.,-hover-effects,-transitions)-can-enhance-interactivity-while-maintaining-simplicity.-The-"Parsing-Result"-placeholder-should-clearly-indicate-its-future-functionality-without-distracting-from-the-PDF-Viewer.
