updated cart page

donutshop_ecommerce/src/app/cart/page.js

@@ -1,41 +1,62 @@
 "use client"
 import React, { useContext } from 'react'
-import { CartContext } from '../../components/AppContext'
+import { CartContext, productTotal } from '../../components/AppContext'
 import Image from 'next/image';
+import { IoMdCloseCircleOutline } from "react-icons/io";
 
 const CartPage = () => {
-    const {cartProducts} = useContext(CartContext);
+    const {cartProducts, removeCartProduct} = useContext(CartContext);
+
+    //cart total
+    let total = 0
+    for(const p of cartProducts){
+        total += productTotal(p)
+    }
 
 
   return (
     <div className='pb-20 md:pb-40'>
-        <div className='px-5 sm:px-10 py-5 sm:py-10'>
+        <div className='px-5 md:px-10 py-5 sm:py-10'>
             <p className='text-center text-2xl sm:text-3xl md:text-4xl text-pink-500 uppercase font-bold drop-shadow-[0_2px_2px_rgba(105,105,105,1)]'>My cart</p>
-            <div className='grid grid-cols-2 mt-10'>
+            <div className='grid grid-cols-1 md:grid-cols-2 gap-5 lg:gap-10 xl:gap-20 mt-5 md:mt-10'>
                 <div className='border-t'>
                     {cartProducts?.length === 0 && (
                         <div>Your cart is empty</div>
                     )}
-                    {cartProducts?.length > 0 &&  cartProducts.map(product => (
-                        <div className='flex flex-row gap-2 items-center border-b'>
-                            <div className='w-[100px] flex items-center justify-center m-2'>
-                                <Image src={product.menuImg} alt='' width={100} height={100} className='w-[100px]'/>
+                    {cartProducts?.length > 0 &&  cartProducts.map((product, index) => (
+                        <div className='flex gap-2 justify-between items-center border-b'>
+                            <div className='flex items-center gap-0 lg:gap-2'>
+                                <div className='w-[60px] sm:w-[100px] flex items-center justify-center py-2'>
+                                    <Image src={product.menuImg} alt='' width={100} height={100} className='w-[45px] sm:w-[65px] lg:w-[80px]'/>
+                                </div>
+                                <div className='m-1'>
+                                    <p className='w-[150px] lg:w-[300px] text-ellipsis whitespace-nowrap overflow-hidden text-[#95743D] text-xs sm:text-sm font-bold'>{product.itemName}</p>
+                                    {product.size && (
+                                        <div className='text-gray-800 font-semibold text-xs sm:text-sm'>Size: <span className='text-[10px] sm:text-xs text-gray-600'>{product.size.itemName}</span></div>
+                                    )}
+                                    {product.extra?.length > 0 && (
+                                        <div className='text-gray-800 font-semibold text-xs sm:text-sm flex flex-col'>Add: {product.extra.map(extras => (
+                                            <span className='w-full lg:w-[200px] text-[10px] sm:text-xs text-gray-600'>{extras.itemName} (+${extras.price})</span>
+                                            ))}
+                                        </div>
+                                    )}
+                                </div>
                             </div>
                             <div>
-                                <p>{product.itemName}</p>
-                                {product.size && (
-                                    <div>Size: <span>{product.size.itemName}</span></div>
-                                )}
-                                {product.extra?.length > 0 && (
-                                    <div>Toppings: {product.extra.map(extras => (
-                                        <span>{extras.itemName} <span>(+${extras.price})</span></span>
-                                    ))}</div>
-                                )}
+                                <p className='text-[#95743D] text-xs sm:text-sm font-semibold'>${productTotal(product)}</p>
+                            </div>
+                            <div className='pr-2 lg:pr-5'>
+                                <button type='button' onClick={() => removeCartProduct(index)}><IoMdCloseCircleOutline className='text-red-600'/></button>
                             </div>
                         </div>
                     ))}
+                    <div className='hidden md:flex justify-end items-end mt-5 md:mt-10'>
+                        <p className='uppercase font-semibold text-sm'>Sub-total <span className='ml-5'>${total}</span></p>
+                    </div>
+                </div>
+                <div className='flex flex-col'>
+                    <p className='uppercase text-gray-700 font-semibold'>Summary</p>
                 </div>
-                <div>right</div>
             </div>
         </div>
         

donutshop_ecommerce/src/components/AppContext.js

@@ -1,9 +1,22 @@
 "use client"
 import { SessionProvider } from 'next-auth/react'
 import React, { createContext, useEffect, useState } from 'react'
+import toast from 'react-hot-toast';
 
 
 export const CartContext = createContext({});
+export function productTotal(cartProduct){
+  let price = cartProduct.basePrice;
+  if(cartProduct.size){
+    price += cartProduct.size.price;
+  }
+  if(cartProduct.extra?.length > 0){
+    for(const extras of cartProduct.extra){
+      price += extras.price
+    }
+  }
+  return price
+}
 
 const AppProvider = ({children}) => {
   const [cartProducts, setCartProducts] = useState([]);
@@ -25,10 +38,10 @@ const AppProvider = ({children}) => {
   function removeCartProduct(indexToRemove){
     setCartProducts(prevCartProducts => {
       const newCartProducts = prevCartProducts.filter((v, index) => index !== indexToRemove);
-      saveCartProductsToLocalStorage(newCartProducts)
-
+      saveCartProductsToLocalStorage(newCartProducts);
       return newCartProducts;
     });
+    toast.success('Item is removed')
   }
 
   function saveCartProductsToLocalStorage(cartProducts){