Add Pantry Item - Copy this React, Tailwind Component to your project
Please design a page for Adding New Items to the Pantry in the FreshSaver – Food Expiration and Waste Reduction Tracker app. The page should provide an intuitive and easy to use interface for users to input new food items they’ve purchased. The following key elements should be included in the design: Page Layout: Form for Adding a New Item: The form should be clean and straightforward with the following input fields: Item Name: A text input field where users can enter the name of the food item (e.g., 'Tomatoes', 'Rice', 'Milk'). Quantity: A number input field for users to specify how many units of the item they are adding (e.g., '3', '2 packs', '1 kg'). Expiration Date: A date picker input where users can select the expiration date for the item. Category: A dropdown or multi select option allowing users to choose a category for the item (e.g., 'Produce', 'Dairy', 'Grains', etc.). Storage Type: A dropdown for users to select how the item should be stored (e.g., 'Refrigerator', 'Freezer', 'Pantry'). Notes (optional): A text input field where users can add any additional notes (e.g., 'Keep in cool, dry place', 'Use within a week after opening'). Buttons: Save Item: A primary button at the bottom to save the item to the pantry. The button should be clearly visible and styled to match the app’s design system. Cancel: A secondary button to cancel the item addition and return to the pantry overview page. Visual Indicators: Provide visual feedback for required fields (e.g., show a red outline for missing required fields). Use icons next to each input field to enhance the form's usability (e.g., a calendar icon next to the expiration date field). Error Handling: If the user tries to submit the form with missing or incorrect information (e.g., empty fields, invalid date format), display a clear error message near the relevant input field. Responsive Design: Ensure the page is mobile responsive, with the form fields stacked vertically on smaller screens for a user friendly experience. The design should scale gracefully across different device sizes, from desktops to tablets to smartphones. User Flow: After the user successfully adds a new item, provide a confirmation message (e.g., “Item added successfully!”) and give the option to add another item or go back to the pantry overview. Please design this page with a clean, modern interface, keeping user experience in mind, and ensuring that adding a new item to the pantry is intuitive and straightforward.
