RV
Reed Vogt

Styled Button - Copy this React, Tailwind Component to your project

Prompt for Generating a File Creation Component: Component Overview: You are to generate a React component that precisely replicates the UI shown in the provided image. The component consists of two primary buttons: "New File" and a folder icon button. These buttons should be styled using Material UI to closely match the visual layout and functionality shown. Styles: Container: The buttons should be horizontally aligned within a flex container. The container should have a small gap between the buttons for spacing. Button Styles: "New File" Button: The button should display a "+" icon followed by the text "New File". The text should be aligned to the left of the button, and the icon should be on the left side of the text. The button background should be white (#FFFFFF) with black text (#000000). The button should have rounded corners, and the height should match the visual height in the provided image. The button should have padding for both the icon and text. Folder Icon Button: The button should display only the folder icon with a "+" symbol. The button should have the same height as the "New File" button but be square in shape. The button should have a minimalistic design with a white background (#FFFFFF) and black icon (#000000). The button should be circular, matching the rounded corner style of the "New File" button. Functionalities: "New File" Button: Primary Function: When clicked, this button should open a modal or dialog that allows the user to create a new file in two ways: File Upload: The user can upload a file from their device. This should handle file validation, e.g., accepted file types and size limits. Custom Text File Creation: The user can create a new text file by entering a filename and content in text fields. After submission, the new file data should be added to the existing file list and stored in the appropriate data structure. Folder Icon Button: Primary Function: When clicked, this button should open a modal or dialog that allows the user to create a new folder. The user should be able to enter a folder name, and upon submission, the new folder data should be added to the existing folder list and stored in the appropriate data structure. Data Structure: File Data: The data produced by the file creation modal should include: id: A unique identifier for the file. name: The name of the file. type: The type of file (e.g., text, document, image). content: The content of the file if it's a text file, or a file path if it's an uploaded file. size: The file size in bytes. createdAt: The timestamp when the file was created. Folder Data: The data produced by the folder creation modal should include: id: A unique identifier for the folder. name: The name of the folder. items: An array containing the id of files or subfolders within this folder. createdAt: The timestamp when the folder was created. Additional Requirements: Responsiveness: Ensure the component is fully responsive, maintaining its layout and style across different screen sizes. The buttons should resize appropriately and maintain their aspect ratio. Error Handling: Include error handling for cases like file upload failure, invalid file types, or duplicate folder names. Display user friendly error messages within the modals. Accessibility: Ensure that the component is accessible with appropriate ARIA labels for screen readers. Include keyboard navigation support for users to interact with the buttons and modal dialogs

Prompt
Component Preview

About

StyledButton - A responsive button component with a "+" icon for "New File" and a folder icon, professionally built with React and Tailwind. Copy template now!

Share

Last updated 1 month ago