Update ProductList.jsx

src/CartItem.jsx

@@ -9,27 +9,48 @@ const CartItem = ({ onContinueShopping }) => {
 
   // Calculate total amount for all products in the cart
   const calculateTotalAmount = () => {
-
+    let total = 0;
+
+    cart.forEach((item) => {
+      const costValue = parseFloat(item.cost.substring(1)); // remove '$'
+      total += costValue * item.quantity;
+    });
+
+    return total.toFixed(2);   
   };
 
   const handleContinueShopping = (e) => {
-
+   alert('Click on Plants Tab to continue shopping!')
   };
 
 
 
   const handleIncrement = (item) => {
-  };
+    const itemToIncrease = state.items.find(item=>item.name===name);    
+        if(itemToIncrease)
+            itemToIncrease.quantity +=1;
+};
 
   const handleDecrement = (item) => {
-
+   const itemToDecrease = state.items.find(item=>item.name===name);    
+        if(itemToDecrease && itemToDecrease.quantity > 0)
+            itemToDecrease.quantity -=1;
   };
 
   const handleRemove = (item) => {
-  };
+    dispatch(removeItem(item));
+};
 
   // Calculate total cost based on quantity for an item
   const calculateTotalCost = (item) => {
+    let total = 0;
+
+    cart.forEach((item) => {
+      const costValue = parseFloat(item.cost.substring(1)); // remove '$'
+      total += costValue * item.quantity;
+    });
+
+    return total.toFixed(2);
   };
 
   return (

src/CartSlice.jsx

@@ -7,13 +7,19 @@ export const CartSlice = createSlice({
   },
   reducers: {
     addItem: (state, action) => {
-
+        const {name,image,quantity}= action.payload;
+        const existingItem = state.items.find((item)=>item.name===name);
+        if(existingItem)
+            existingItem.quantity +=1;
+        else
+           state.items.push({name,image,quantity:1});
     },
     removeItem: (state, action) => {
+        const name = action.payload;
+        state.items = state.items.filter(item=>item.name===name)
     },
     updateQuantity: (state, action) => {
-
-
+        const name = action.payload;
     },
   },
 });

src/ProductList.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import './ProductList.css'
 import CartItem from './CartItem';
+import { addItem } from './CartSlice';
 function ProductList({ onHomeClick }) {
     const [showCart, setShowCart] = useState(false);
     const [showPlants, setShowPlants] = useState(false); // State to control the visibility of the About Us page
@@ -274,6 +275,34 @@ function ProductList({ onHomeClick }) {
             </div>
             {!showCart ? (
                 <div className="product-grid">
+                    {plantsArray.map((category, index) => ( // Loop through each category in plantsArray
+                    <div key={index}> {/* Unique key for each category div */}
+                        <h1>
+                            <div>{category.category}</div> {/* Display the category name */}
+                        </h1>
+                    <div className="product-list"> {/* Container for the list of plant cards */}
+                        {category.plants.map((plant, plantIndex) => ( // Loop through each plant in the current category
+                            <div className="product-card" key={plantIndex}> {/* Unique key for each plant card */}
+                            <img 
+                                className="product-image" 
+                                src={plant.image} // Display the plant image
+                                alt={plant.name} // Alt text for accessibility
+                            />
+                            <div className="product-title">{plant.name}</div> {/* Display plant name */}
+                                {/* Display other plant details like description and cost */}
+                            <div className="product-description">{plant.description}</div> {/* Display plant description */}
+                            <div className="product-cost">${plant.cost}</div> {/* Display plant cost */}
+                    <button
+                        className="product-button"
+                        onClick={() => addItem} // Handle adding plant to cart
+                    >
+                        Add to Cart
+                    </button>
+                </div>
+      ))}
+    </div>
+  </div>
+))}
 
 
                 </div>