Api Store - Copy this React, Tailwind Component to your project
Create a modern, minimalist UI modal for document creation with the following features: Modal header: Title: "Create New Document" Close button (X) in the top right corner Two options presented as toggle buttons: "Create Document" "Upload File" "Create Document" section: Input field for document title Placeholder text: "Enter document title" Character limit: 100 characters Real time character count below the input field "Upload File" section: Drag and drop area with dashed border Text: "Drag and drop your file here" "Browse" button below the drag and drop area Accepted file types: .pdf, .docx, .txt (show as helper text) Max file size: 10MB (show as helper text) Action buttons at the bottom: "Cancel" button (secondary style) "Create" button (primary style, disabled until valid input is provided) Loading state: Show a subtle loading animation when the create/upload action is in progress Disable all inputs and buttons during loading Success/Error messages: Display a toast notification for success or error states Success message: "Document created successfully" Error message: "An error occurred. Please try again." Accessibility: Ensure proper keyboard navigation Add appropriate ARIA labels and roles Implement focus management when the modal opens/closes Responsive design: Adjust layout for mobile devices (stack options vertically if needed) Ensure touch friendly tap targets on mobile Color scheme: Use a light, neutral background color Employ a primary color for interactive elements and the "Create" button Use subtle shadows for depth Typography: Use a clean, sans serif font Implement a clear hierarchy with different font weights and sizes Animations: Add subtle transitions for button hovers and option toggles Implement a smooth fade in/fade out for the modal Implement dummy endpoints in the ApiStore: createDocument(title: string): Promise<{ success: boolean, documentId: string }> uploadFile(file: File): Promise<{ success: boolean, documentId: string }> These endpoints should return mock responses for now, to be replaced with actual API calls later.
