Admin Interface - Copy this React, Tailwind Component to your project
Create a modern eCommerce admin interface for adding a new product, with a clean and minimalistic design, featuring distinct sections for product information, images, and categories. Header: At the very top, the page header contains the website's logo and domain name, 'SalesSync.com', placed in the center. To the right, there are user options including a profile picture of 'Kamisato Aya' (labelled as 'Manager') along with icons for notifications, settings, and a dropdown for selecting date and sales metrics. There are two main buttons aligned on the right: A round white button with 'Save Draft' text. A larger green button labeled 'Add Product' with a plus icon. Sidebar (Left Navigation Menu): The sidebar is on the left side of the screen and features the SalesSync logo and the main navigation menu. The menu items include: 'Overview', 'Analytics', and 'Product' (highlighted in green as the current page). Below, under 'Transaction', are 'Payment', 'Refunds', 'Invoice', and 'Returns'. Further down are options for 'Notifications', 'Feedback', 'Settings', and a 'Dark Mode' toggle. Main Content Area: The title 'Add New Product' is displayed at the top of the main content area, followed by a two column layout. General Information Section (Left Column): This section contains input fields for product details: Name Product: A field for the product name, which currently shows 'Puffer Jacket With Pocket Detail'. Description Product: A text area filled with product details like material and design (e.g., 'Cropped puffer jacket made of technical fabric...'). Below, there are two input options: Size: Multiple size options displayed as buttons ('XS', 'S', 'M', 'XL', 'XXL'), with 'S' and 'M' highlighted. Gender: Three gender options ('Men', 'Woman', 'Unisex'), with 'Woman' selected. Pricing and Stock Section: Base Pricing: A price field that currently shows '$47.55'. Stock: A field showing '77' available stock units. Discount: A discount percentage field, currently set to '10%'. Discount Type: A dropdown showing 'New Year Discount'. Upload Image Section (Right Column): On the right, there is a section labeled 'Upload Img' displaying a product image of a mint green puffer jacket. Below the main image, there are smaller preview thumbnails of the product, including a cropped view of the jacket and another angle. There is a plus button below the thumbnails for adding more images. Category Section: At the bottom of the right column is the 'Category' section: Product Category: A dropdown menu with 'Jacket' as the selected option. Below the dropdown, there's a green button labeled 'Add Category'. The entire interface is clean and structured, with a white background, gray text fields, and a light green accent for buttons and highlights. The design uses ample white space and minimalist icons to keep the interface uncluttered and user friendly.
