Document List - Copy this React, Tailwind Component to your project
Background and Layout: Background Color: The main list background is white (#FFFFFF) to provide a clean, uncluttered space for displaying documents. Section dividers or headers use light gray (#F5F5F5) to differentiate between different parts of the list. Padding and Margins: Generous padding around list items ensures readability and reduces visual clutter. Spacing between elements maintains a structured and organized look. Document List Items: Each document is represented by a list item, displaying essential information such as document title, creation date, and status (e.g., "In Progress," "Completed"). Text Style: The document title is in deep blue (#003366), using Roboto Medium, while the metadata (date, status) is shown in charcoal gray (#333333) with Roboto Regular for easy readability. Hover Effect: When hovering over a document item, the background subtly changes to turquoise (#00B3B3) to indicate interactivity. The text remains visible with a white overlay, making the transition smooth and clear. Document Actions: Icons for quick actions (view, edit, delete, share) are located to the right of each document item, represented with minimalist icons in turquoise (#00B3B3). On hover, the icons slightly scale or change shades to provide feedback and enhance usability. A dropdown menu can be included for additional actions (e.g., "Download as PDF," "Move to Folder"). The dropdown uses white (#FFFFFF) background with turquoise highlights for selected items. Search and Filter: A search bar at the top of the component allows users to quickly find specific documents. The search bar has a light gray border (#A5A5A5), and the input text is charcoal gray (#333333) for contrast and readability. Filter options (e.g., by status, date, or document type) are available next to the search bar. These filters are styled with turquoise (#00B3B3) dropdown menus or checkboxes, ensuring consistency with the platform’s color scheme. Sorting Options: Users can sort documents by various criteria (e.g., date, name, status) using a toggle button or sorting dropdown located above the list. The toggle buttons are designed with deep blue text (#003366) and change to turquoise when active, providing visual cues for the current sorting option. Pagination (if applicable): For large document collections, pagination controls appear at the bottom of the list. These controls use simple turquoise buttons with white text, allowing users to navigate between pages easily. The current page is highlighted in deep blue (#003366) for clarity. Empty State: If no documents are available or found, the component displays an empty state message with an icon and prompt (e.g., "No documents found."). The icon is a simple line drawing in turquoise (#00B3B3), and the text is charcoal gray (#333333). The empty state also includes a call to action button (e.g., "Upload Document" or "Create New Document"), styled in turquoise with white text. Responsiveness: The component is fully responsive, adapting to different screen sizes. On mobile devices, the document items are stacked vertically, and actions like sorting and filtering are accessible through a hamburger menu or collapsible section. Icons and text scale appropriately on smaller screens to maintain usability without compromising design consistency.
