A
Anonymous

Drawer Width - Copy this React, Mui Component to your project

"Design a professional user interface screen for a web application. The layout should include the following: Sidebar: A vertical sidebar on the left side of the screen for navigation. It should be simple and include minimal icons or labels for navigation items. Main Content Area: First Section: The Organization Name displayed prominently as a heading. Below the heading, include fields to display: Customer Name Email IDs Contact Numbers Products List Remarks Alternate Contact Number A Status Dropdown to select the status. Second Section: A labeled text box for Product Requirements where users can input descriptions. Third Section: A table with the following headers: "SL" "Product" "Quantity" "Time" The table should allow users to add rows and input data. Fourth Section: Another labeled text box for Competitive Analysis, where users can input descriptions. Fifth Section: A table for Competitive Analysis Report with the following headers: "SL No." "Org Name" "Product" "Quantity" "Remarks" This table should also support adding rows and data input. Edit Button: Include an Edit Button at a visible position on the screen. Clicking the button should enable editing for all fields, including the tables, and provide a way to save changes. Styling: A clean and modern design with a professional color scheme. Tables should have clear borders and alternating row colors for readability. Buttons should be styled with rounded edges and hover effects for interactivity."

Prompt
Component Preview

About

drawerWidth - Create a sleek sidebar for navigation, showcasing organization details, product lists, and editable tables. Built with Rea. Start coding now!

Share

Last updated 1 month ago