updated add to cart functionality

donutshop_ecommerce/src/components/AppContext.js

@@ -1,11 +1,26 @@
 "use client"
 import { SessionProvider } from 'next-auth/react'
-import React from 'react'
+import React, { createContext, useState } from 'react'
+
+
+export const CartContext = createContext({});
 
 const AppProvider = ({children}) => {
+  const [cartProducts, setCartProducts] = useState([]);
+
+  function addToCart(product, size=null){
+    setCartProducts(prevProducts => {
+      const cartProduct = {...product, size}
+      const newProducts = [...prevProducts, cartProduct];
+      return newProducts
+    })
+  }
+
   return (
     <SessionProvider>
+      <CartContext.Provider value={{cartProducts, setCartProducts, addToCart,}}>
         {children}
+      </CartContext.Provider>
     </SessionProvider>
   )
 }

donutshop_ecommerce/src/components/layout/Header.js

@@ -1,10 +1,12 @@
 "use client"
-import React, { useState } from "react";
+import React, { useContext, useState } from "react";
 import {signOut, useSession} from 'next-auth/react'
 import Image from 'next/image';
 import Link from 'next/link';
 import { IoCloseOutline } from "react-icons/io5";
 import { HiBars2 } from "react-icons/hi2";
+import { BsBox2Heart } from "react-icons/bs";
+import { CartContext } from "../AppContext";
 
 
 const Header = () => {
@@ -16,6 +18,10 @@ const Header = () => {
     //use session
     const session = useSession();
     const status = session?.status;
+
+    //add to cart
+    const {cartProducts} = useContext(CartContext);
+
     //use userdata
     const userData = session.data?.user;
     let userName = userData?.name || userData?.email;
@@ -53,6 +59,7 @@ const Header = () => {
                     {status === 'authenticated' && (
                         <>
                             <Link href={'/profile'} className="text-gray-700 text-sm capitalize">{userName}</Link>
+                            <Link href='/cart' className="flex gap-1 items-center"><BsBox2Heart/>({cartProducts.length})</Link>
                             <button onClick={() => signOut()} className="px-4 py-2 border border-[#DCA0AE] rounded-full hover:bg-[#DCA0AE] hover:text-white duration-300 uppercase">Logout</button>
                         </>
                     )}
@@ -62,7 +69,6 @@ const Header = () => {
                             <Link href='/register' className="px-4 py-2 border border-[#DCA0AE] rounded-full hover:bg-[#DCA0AE] hover:text-white duration-300">Register</Link>
                         </>
                     )}
-                    
                 </ul>
                 <div onClick={() => setNav(!nav)} className="cursor-pointer pr-4 z-20 text-[#95743D] md:hidden "> {nav ? <IoCloseOutline size={30} /> : <HiBars2 size={30} />}</div>
                 {nav && (

donutshop_ecommerce/src/components/menu/Menu.js

@@ -6,8 +6,8 @@ const Menu = ({menuImg, itemName, description, basePrice, sizes}) => {
     <div className='py-1 sm:py-5 flex flex-col gap-2 sm:gap-4 justify-center items-center text-center rounded-xl border border-pink-500 h-[300px] sm:h-[450px] shadow-md hover:shadow-[#E78895] duration-300'>
       <Image src={menuImg} width={300} height={300} alt='menu-donut' className='w-[150px] sm:w-[230px]'/>
       <p className='text-sm sm:text-base font-semibold capitalize text-[#95743D] px-2'>{itemName}</p>
-      <p className='text-xs sm:text-sm px-2 line-clamp-2'>{description}</p>
-      <p className='text-[#95743D] text-sm'>${basePrice}</p>
+      <p className='text-xs sm:text-sm px-2 line-clamp-2 text-[#95743D]'>{description}</p>
+      <p className='text-[#95743D] text-sm font-semibold'>${basePrice}</p>
       <button className='px-2 py-1 sm:px-4 sm:py-2 rounded-full text-xs sm:text-sm border border-[#E78895] text-[#95743D] font-semibold hover:bg-[#E78895] hover:text-[#FDE2DE] duration-300'>Add to cart</button>
     </div>
   )

donutshop_ecommerce/src/components/menu/MenuItem.js

@@ -1,8 +1,10 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import Image from 'next/image';
+import { CartContext } from '../AppContext';
 
-const MenuItem = ({menuImg, itemName, description, basePrice, sizes}) => {
-  
+const MenuItem = (menuItem) => {
+  const {menuImg, itemName, description, basePrice, sizes} = menuItem
+  const {addToCart} = useContext(CartContext)
   
   return (
     <div className='py-1 sm:py-5 flex flex-col gap-2 sm:gap-4 justify-center items-center text-center rounded-xl bg-white h-[350px] sm:h-[450px]'>
@@ -10,7 +12,7 @@ const MenuItem = ({menuImg, itemName, description, basePrice, sizes}) => {
       <p className='text-sm sm:text-base font-semibold capitalize text-[#95743D] px-2'>{itemName}</p>
       <p className='text-xs sm:text-sm px-2 line-clamp-2'>{description}</p>
       <p className='text-[#95743D] text-sm'>${basePrice}</p>
-      <button className='px-2 py-1 sm:px-4 sm:py-2 rounded-full text-xs sm:text-sm border border-[#E78895] text-[#95743D] font-semibold hover:bg-[#E78895] hover:text-[#FDE2DE] duration-300'>Add to cart</button>
+      <button onClick={() => addToCart(menuItem)} className='px-2 py-1 sm:px-4 sm:py-2 rounded-full text-xs sm:text-sm border border-[#E78895] text-[#95743D] font-semibold hover:bg-[#E78895] hover:text-[#FDE2DE] duration-300'>Add to cart</button>
     </div>
   )
 }