Madicionando produtos

src/CartSlice.jsx

@@ -7,7 +7,7 @@ export const CartSlice = createSlice({
   },
   reducers: {
     addItem: (state, action) => {
-
+        state.items.push(action.payload);
     },
     removeItem: (state, action) => {
     },

src/ProductList.jsx

@@ -1,10 +1,24 @@
 import React, { useState, useEffect } from 'react';
 import './ProductList.css'
 import CartItem from './CartItem';
+import { addItem } from './CartSlice';
+
 function ProductList({ onHomeClick }) {
+    const dispatch = useDispatch();
     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 handleAddToCart = (product) => {
+     dispatch(addItem(product));
+
+     setAddedToCart((prevState) => ({ 
+      ...prevState, 
+      [product.name]: true, 
+     }));
+    };
+
     const plantsArray = [
         {
             category: "Air Purifying Plants",
@@ -274,9 +288,32 @@ function ProductList({ onHomeClick }) {
             </div>
             {!showCart ? (
                 <div className="product-grid">
-
-
-                </div>
+                    {plantsArray.map((category, index) => ( 
+  <div key={index}> 
+    <h1>
+      <div>{category.category}</div> 
+    </h1>
+    <div className="product-list"> 
+      {category.plants.map((plant, plantIndex) => ( 
+        <div className="product-card" key={plantIndex}> 
+          <img 
+            className="product-image" 
+            src={plant.image}
+            alt={plant.name} 
+          />
+          <div className="product-title">{plant.name}</div> 
+          <div className="product-description">{plant.description}</div> 
+          <div className="product-cost">${plant.cost}</div> 
+          <button
+            className="product-button"
+            onClick={() => handleAddToCart(plant)} >{addedToCart[plant.name] ? "Added" : "Add to Cart"}
+            </button>
+        </div>
+      ))}
+    </div>
+  </div>
+))}
+            </div>
             ) : (
                 <CartItem onContinueShopping={handleContinueShopping} />
             )}

src/main.jsx

@@ -10,4 +10,4 @@ ReactDOM.createRoot(document.getElementById('root')).render(
     <App />
     </Provider>
   </React.StrictMode>,
-)
+);