fix

src/CartItem.jsx

@@ -9,27 +9,67 @@ const CartItem = ({ onContinueShopping }) => {
 
   // Calculate total amount for all products in the cart
   const calculateTotalAmount = () => {
-
+       let total = 0;
+
+  cart.forEach((item) => {
+    // Extract cost as a number (remove "$" and parse)
+    const cost = parseFloat(item.cost.substring(1));
+
+    // Multiply cost by quantity
+    const itemTotal = cost * item.quantity;
+
+    // Add to running total
+    total += itemTotal;
+  });
+
+  return total;
   };
 
   const handleContinueShopping = (e) => {
-
+   e.preventDefault();
+    onContinueShopping(e); 
   };
 
+  const handleCheckoutShopping = (e) => {
+  alert('Functionality to be added for future reference');
+};
 
 
   const handleIncrement = (item) => {
+    dispatch(
+      updateQuantity({
+        name: item.name,
+        quantity: item.quantity + 1, // increase by 1
+      })
+    );
   };
 
   const handleDecrement = (item) => {
-
+    if (item.quantity > 1) {
+      // Decrease quantity
+      dispatch(
+        updateQuantity({
+          name: item.name,
+          quantity: item.quantity - 1,
+        })
+      );
+    } else {
+      // Remove item entirely
+      dispatch(removeItem({ name: item.name }));
+    }
   };
 
   const handleRemove = (item) => {
+     dispatch(removeItem({ name: item.name }));
   };
 
   // Calculate total cost based on quantity for an item
   const calculateTotalCost = (item) => {
+    const unitPrice = parseFloat(item.cost.substring(1));
+
+  // Multiply by quantity to get subtotal
+  const totalCost = unitPrice * item.quantity;
+
   };
 
   return (
@@ -57,7 +97,7 @@ const CartItem = ({ onContinueShopping }) => {
       <div className="continue_shopping_btn">
         <button className="get-started-button" onClick={(e) => handleContinueShopping(e)}>Continue Shopping</button>
         <br />
-        <button className="get-started-button1">Checkout</button>
+        <button className="get-started-button1" onClick={(e) => handleCheckoutShopping(e)}>Checkout</button>
       </div>
     </div>
   );

src/CartSlice.jsx

@@ -7,12 +7,28 @@ export const CartSlice = createSlice({
   },
   reducers: {
     addItem: (state, action) => {
-
+       const { name, image, cost } = action.payload; // Destructure product details from the action payload
+  // Check if the item already exists in the cart by comparing names
+  const existingItem = state.items.find(item => item.name === name);
+  if (existingItem) {
+    // If item already exists in the cart, increase its quantity
+    existingItem.quantity++;
+  } else {
+    // If item does not exist, add it to the cart with quantity 1
+    state.items.push({ name, image, cost, quantity: 1 });
+  }
     },
     removeItem: (state, action) => {
+        const { name } = action.payload;
+        state.items = state.items.filter(item => item.name !== name);
     },
     updateQuantity: (state, action) => {
-
+const { name, quantity } = action.payload; // Destructure the product name and new quantity from the action payload
+// Find the item in the cart that matches the given name
+const itemToUpdate = state.items.find(item => item.name === name);
+if (itemToUpdate) {
+  itemToUpdate.quantity = quantity; // If the item is found, update its quantity to the new value
+}
 
     },
   },

src/ProductList.jsx

@@ -1,9 +1,14 @@
 import React, { useState, useEffect } from 'react';
 import './ProductList.css'
 import CartItem from './CartItem';
+import { addItem } from './CartSlice';
+import { useDispatch } from 'react-redux';
 function ProductList({ onHomeClick }) {
     const [showCart, setShowCart] = useState(false);
     const [showPlants, setShowPlants] = useState(false); // State to control the visibility of the About Us page
+    const [addedToCart, setAddedToCart] = useState({});
+
+    const dispatch = useDispatch();
 
     const plantsArray = [
         {
@@ -248,6 +253,14 @@ function ProductList({ onHomeClick }) {
         setShowCart(false); // Hide the cart when navigating to About Us
     };
 
+    const handleAddToCart = (product) => {
+  dispatch(addItem(product)); // Dispatch the action to add the product to the cart (Redux action)
+  setAddedToCart((prevState) => ({ // Update the local state to reflect that the product has been added
+    ...prevState, // Spread the previous state to retain existing entries
+    [product.name]: true, // Set the current product's name as a key with value 'true' to mark it as added
+  }));
+};
+
     const handleContinueShopping = (e) => {
         e.preventDefault();
         setShowCart(false);
@@ -274,7 +287,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={() => handleAddToCart(plant)} // Handle adding plant to cart
+          >
+            Add to Cart
+          </button>
+        </div>
+      ))}
+    </div>
+  </div>
+))}
 
                 </div>
             ) : (