feat: agregar imágenes al carrito

src/Cart.jsx

@@ -15,38 +15,41 @@ const Cart = () => {
       <div id="cartContainer" className="flex gap-4 flex-col">
         {cart.map((pizza) => (
           <div
-            className="border-3 border-lime-300 rounded-md p-2"
+            className="border-3 border-lime-300 rounded-md flex gap-4 overflow-hidden"
             key={pizza.id}
           >
-            <h2>Pizza {pizza.name}</h2>
-            <div className="flex gap-4">
-              <button
-                onClick={() => {
-                  setCart((cart) =>
-                    cart.map((p) =>
-                      p.id === pizza.id ? { ...p, count: p.count + 1 } : p,
-                    ),
-                  );
-                }}
-                className="bg-blue-500 px-4 text-white rounded-md"
-              >
-                +
-              </button>
-              <p className="text-grey-500">{pizza.count}</p>
-              <button
-                onClick={() => {
-                  setCart((cart) =>
-                    cart
-                      .map((p) =>
-                        p.id === pizza.id ? { ...p, count: p.count - 1 } : p,
-                      )
-                      .filter((p) => p.count > 0),
-                  );
-                }}
-                className="bg-red-500 px-4 text-white rounded-md"
-              >
-                -
-              </button>
+            <img src={pizza.img} className="w-32 rounded-r-sm" />
+            <div>
+              <h2>Pizza {pizza.name}</h2>
+              <div className="flex gap-4">
+                <button
+                  onClick={() => {
+                    setCart((cart) =>
+                      cart.map((p) =>
+                        p.id === pizza.id ? { ...p, count: p.count + 1 } : p,
+                      ),
+                    );
+                  }}
+                  className="bg-blue-500 px-4 text-white rounded-md"
+                >
+                  +
+                </button>
+                <p className="text-grey-500">{pizza.count}</p>
+                <button
+                  onClick={() => {
+                    setCart((cart) =>
+                      cart
+                        .map((p) =>
+                          p.id === pizza.id ? { ...p, count: p.count - 1 } : p,
+                        )
+                        .filter((p) => p.count > 0),
+                    );
+                  }}
+                  className="bg-red-500 px-4 text-white rounded-md"
+                >
+                  -
+                </button>
+              </div>
             </div>
           </div>
         ))}

src/pizzas.js

@@ -60,20 +60,20 @@ export const pizzaCart = [
     name: "napolitana",
     price: 5950,
     count: 1,
-    img: "https://firebasestorage.googleapis.com/v0/b/apis-varias-mias.appspot.com/o/pizzeria%2Fpizza-1239077_640_cl.jpg?alt=media&token=6a9a33da-5c00-49d4-9080-784dcc87ec2c",
+    img: imgNapolitana,
   },
   {
     id: "P002",
     name: "española",
     price: 7250,
     count: 1,
-    img: "https://firebasestorage.googleapis.com/v0/b/apis-varias-mias.appspot.com/o/pizzeria%2Fcheese-164872_640_com.jpg?alt=media&token=18b2b821-4d0d-43f2-a1c6-8c57bc388fab",
+    img: imgEspanola,
   },
   {
     id: "P003",
     name: "salame",
     price: 5990,
     count: 1,
-    img: "https://firebasestorage.googleapis.com/v0/b/apis-varias-mias.appspot.com/o/pizzeria%2Fpizza-1239077_640_com.jpg?alt=media&token=e7cde87a-08d5-4040-ac54-90f6c31eb3e3",
+    img: imgSalame,
   },
 ];