A
Anonymous

Color Tile - Copy this React, Mui Component to your project

"Design a modern, clean, and responsive user interface for a bicycle storage management form. The form should include the following elements and sections: 1. **Image Preview Section**: Display preview images of the bicycle in a well organized grid layout with clear borders and a title 'Photos'. 2. **Storage Location Input**: A text input for entering the bicycle storage location, with helper text for validation errors. 3. **Classification Dropdown**: A dropdown for selecting the bicycle classification (e.g., 'BICYCLE', 'MOTORCYCLE', etc.), with a label and error message handling. Provide distinct visual feedback for validation errors. 4. **Bicycle Details Section (If BICYCLE Selected)**: Fields for entering the bicycle registration number and serial number, styled with clean input fields and labeled sections. Group the inputs in a bordered card with soft background colors. 5. **License Plate Details (If MOTORIZED BICYCLE Selected)**: Input fields for entering the license plate number and selecting the license plate color. Use a color palette component to display the color options with a color tile next to each option. Provide dynamic layout changes based on the selected classification. 6. **Color Selection**: A dropdown for selecting the bicycle's color, with distinct color labels. Include a color preview tile next to the selected color. 7. **Checkboxes and Switches for Additional Options**: A switch to indicate if the bicycle has a basket. A switch for whether the bicycle is locked. Use icons and clear text for each switch. 8. **Conditions Section**: A multi select dropdown for choosing the conditions of the bicycle (e.g., 'New', 'Used', etc.), with tags displaying the selected conditions. 9. **Grade Section**: A single select dropdown for selecting the bicycle grade, with clear error handling. 10. **Action Buttons**: Two main buttons at the bottom: A primary 'Submit' button styled with a prominent action color and an icon. A secondary 'Reset' button with a clear, less prominent color and an icon for starting over. 11. **Form Feedback**: An error alert box at the bottom of the form for showing server side error messages, styled to fit the overall UI theme. The design should focus on simplicity, intuitive navigation, and modern UI patterns. Use material design principles with a mix of soft colors, minimal borders, and responsive layouts for mobile and desktop screens."

Prompt
Component Preview

About

ColorTile - Showcase color options with vibrant tiles, enabling easy selection for bicycles. Built with React and MUI for a sleek desig. Get free template!

Share

Last updated 1 month ago