added add items .js

.env.local

@@ -3,4 +3,5 @@
   VITE_projectId=practice-bistro-boss-76004
   VITE_storageBucket=practice-bistro-boss-76004.appspot.com
   VITE_messagingSenderId=276896028259
-  VITE_appId=1:276896028259:web:85d0b1b451d1627ea24a56
+  VITE_appId=1:276896028259:web:85d0b1b451d1627ea24a56
+  VITE_IMAGEBB_API_KEY=dee147da6fa286e04281ed02aadad7bf

src/Componenets/Dashboard/AddItem/AddItem.jsx

@@ -1,9 +1,83 @@
+import toast from "react-hot-toast";
+import useAxiosSecure from "../../Hooks/useAxiosSecure";
+import { imageUpload } from "../../Hooks/useImage";
+import SectionTitle from "../../SectionTiltle/SectionTitle/SectionTitle";
 
 
 const AddItem = () => {
+   const axiosSecure = useAxiosSecure();
+    const handleAddItems = async event => {
+        event.preventDefault();
+        const form = event.target;
+        const name = form.name.value;
+        const category = form.category.value;
+        const price = parseFloat(form.price.value);
+        const recipe = form.recipe.value;
+        const image = form.image.files[0]
+        const imageData = await imageUpload(image)
+        console.log(imageData);
+        console.log(name, category, price, image);
+        const menuItem = {
+             name,
+             category,
+             price,
+             recipe,
+             image :imageData?.data?.display_url
+        }
+        axiosSecure.post("/menu" , menuItem)
+        .then(res => {
+            console.log(res.data);
+            if(res.data.insertedId){
+                toast.success("Successfully Add Item")
+            }
+        })
+    }
+
     return (
         <div>
-            This Is Item
+            <SectionTitle heading={"---what's new?---"} subHeading={"ADD AN ITEM"} />
+            <div>
+                <div className=" w-full ">
+                    <form onSubmit={handleAddItems} className="card-body">
+                        <div className="form-control">
+                            <label className="label">
+                                <span className="label-text font-bold">Recipe Name</span>
+                            </label>
+                            <input type="text" name='name' placeholder="Type here" className="border-2 p-2 w-full px-4 rounded-md" required />
+                        </div>
+                        <div className="flex justify-evenly   gap-3 mb-3">
+                            <div className="form-control w-1/2">
+                                <label className="label">
+                                    <span className="label-text font-bold">Category</span>
+                                </label>
+                                <select className="select select-bordered  p-2 w-full px-4 " name="category">
+                                    <option disabled selected>Select Recipe</option>
+                                    <option>salad</option>
+                                    <option>drinks</option>
+                                    <option>soups</option>
+                                    <option>dessert</option>
+                                    <option>pizza</option>
+
+                                </select>
+                            </div>
+                            <div className="form-control w-1/2 ">
+                                <label className="label">
+                                    <span className="label-text  font-bold">Price</span>
+                                </label>
+                                <input type="text" name='price' placeholder="Type here" className="border-2 p-2 w-full px-4 rounded-md" required />
+                            </div>
+
+                        </div>
+                        <textarea className="textarea textarea-bordered h-24" placeholder="Recipe Details" name="recipe"></textarea>
+                        <input type="file" name="image" accept="image/*" className="file-input file-input-ghost w-full text-orange-500 font-bold max-w-xs" />
+                        <div className="form-control mt-6">
+                            <button className="btn  bg-orange-500 font-bold text-white">ADD ITEM</button>
+                        </div>
+                    </form>
+
+
+                </div>
+            </div>
         </div>
     );
 };

src/Componenets/Dashboard/Dashboard/Dashboard.jsx

@@ -115,6 +115,13 @@ const Dashboard = () => {
         <li>
             <NavLink  className={({ isActive, isPending }) =>
     isPending ? "pending" : isActive ? "bg-orange-500 p-3 text-white font-bold" : "hover:bg-orange-500 hover:text-white p-3 font-bold"
+  } to="/ourShop">
+                <BsCart2 />
+                Our Shop</NavLink>
+        </li>
+        <li>
+            <NavLink  className={({ isActive, isPending }) =>
+    isPending ? "pending" : isActive ? "bg-orange-500 p-3 text-white font-bold" : "hover:bg-orange-500 hover:text-white p-3 font-bold"
   } to="/contactUs">
                 <FaEnvelope></FaEnvelope>
                 Contact</NavLink>

src/Componenets/Hooks/useImage.jsx

@@ -0,0 +1,11 @@
+import axios from "axios"
+
+
+export const imageUpload = async photo => {
+    const formData = new FormData()
+    formData.append("image" , photo)
+    const {data} =  await axios.post(`https://api.imgbb.com/1/upload?key=${import.meta.env.VITE_IMAGEBB_API_KEY}`,
+
+formData    )
+return data
+}