created add box size components

donutshop_ecommerce/src/components/layout/MenuItemForm.js

@@ -1,16 +1,19 @@
 import React, { useState } from 'react'
 import EditImage from './EditImage';
+import MenuItemProps from './MenuItemProps'
+
 
 const MenuItemForm = ({handleMenuFormSubmit, menuItem}) => {
     const [menuImg, setMenuImg] = useState(menuItem?.menuImg || '');
     const [itemName, setItemName] = useState(menuItem?.itemName || '');
     const [description, setDescription] = useState(menuItem?.description || '');
     const [basePrice, setBasePrice] = useState(menuItem?.basePrice || '');
-
+    const [sizes, setSizes] = useState([]);
+    
 
 
   return (
-    <form className='mt-10' onSubmit={ev => handleMenuFormSubmit(ev, {menuImg, itemName, description, basePrice})}>
+    <form className='mt-10' onSubmit={ev => handleMenuFormSubmit(ev, {menuImg, itemName, description, basePrice, sizes})}>
         <div className='flex flex-col gap-2 justify-center items-center max-w-[100px] mx-auto mb-5'>
             <EditImage link={menuImg} setLink={setMenuImg}/>
         </div>
@@ -26,6 +29,7 @@ const MenuItemForm = ({handleMenuFormSubmit, menuItem}) => {
             <label className='-mb-1 text-gray-700 font-semibold text-sm flex'>Price</label>
             <input type='text' placeholder='Enter base price' value={basePrice} onChange={ev => setBasePrice(ev.target.value)}/>
         </div>
+        <MenuItemProps props={sizes} setProps={setSizes}/>
         <button type='submit' className='w-full bg-pink-500 text-white p-2 rounded-md hover:opacity-80 duration-300'>Save</button>
     </form>
   )

donutshop_ecommerce/src/components/layout/MenuItemProps.js

@@ -0,0 +1,51 @@
+import React from 'react'
+import { IoTrashOutline } from "react-icons/io5";
+
+const MenuItemProps = ({props, setProps}) => {
+
+    function addProp(){
+        setProps(oldProp => {
+            return [...oldProp, {itemName:'', price:0}];
+        })
+    }
+
+    function editProp(ev, index, prop){
+        const newValue = ev.target.value;
+        setProps(prevSizes => {
+            const newSizes = [...prevSizes];
+            newSizes[index][prop] = newValue;
+            return newSizes
+        })
+    }
+
+    function removeProp(indexRemove){
+        setProps(prev => prev.filter((v, index) => index !== indexRemove))
+    }
+
+
+  return (
+    <div>
+        <label className='mb-2 text-gray-700 font-semibold text-sm flex'>Box of donuts</label>
+        <div className='border p-2 block my-2 w-full rounded-md outline-none border-[#DCA0AE]'>
+            {props?.length > 0 && props.map((size, index) => (
+                <div className='flex gap-2 items-center'>
+                    <div>
+                        <label className='-mb-1 text-gray-700 text-sm flex'>Donuts</label>
+                        <input type='text' placeholder='Donuts' value={size.itemName} onChange={ev => editProp(ev, index, 'itemName')}/>
+                    </div>
+                    <div>
+                        <label className='-mb-1 text-gray-700 text-sm flex'>Price</label>
+                        <input type='text' placeholder='Price' value={size.price} onChange={ev => editProp(ev, index, 'price')}/>
+                    </div>
+                    <div className='flex items-center mt-5 text-red-500'>
+                        <button type='button' onClick={() => removeProp(index)}><IoTrashOutline/></button>
+                    </div>
+                </div>
+            ))}
+            <button type='button' onClick={addProp} className='bg-gray-200 w-full p-2 rounded-md hover:opacity-80'>Add donuts</button>
+        </div>
+    </div>
+  )
+}
+
+export default MenuItemProps