SilverTke/pizzeria-react-dela
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: agregar imágenes al carrito

Browse source
This commit is contained in:
Sofía Maturana 2026-04-09 15:04:24 -04:00
parent 9b1f471ebc
commit cc505c5a61
2 changed files with 36 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
src/Cart.jsx
View file

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

6
src/pizzas.js
View file

@ -60,20 +60,20 @@ export const pizzaCart = [
name: "napolitana", name: "napolitana",
price: 5950, price: 5950,
count: 1, 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", id: "P002",
name: "española", name: "española",
price: 7250, price: 7250,
count: 1, 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", id: "P003",
name: "salame", name: "salame",
price: 5990, price: 5990,
count: 1, 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,
}, },
]; ];