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

feat: agregar total al carrito

Browse source
This commit is contained in:
Sofía Maturana 2026-04-08 13:48:11 -04:00
parent 2436eb3747
commit e82cd0d475
1 changed files with 47 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
src/Cart.jsx
View file

@ -4,42 +4,54 @@ import { pizzaCart } from "./pizzas";
const Cart = () => { const Cart = () => {
const [cart, setCart] = useState(pizzaCart); const [cart, setCart] = useState(pizzaCart);
return ( return (
<div id="cartContainer" className="flex gap-4 flex-col"> <section id="cart">
{cart.map((pizza) => ( <h1 className="text-4xl font-bold">Carrito</h1>
<div className="border-3 border-lime-300 rounded-md p-2" key={pizza.id}> <p>
<h2>Pizza {pizza.name}</h2> Total:
<div className="flex gap-4"> <strong>
<button {` $${cart.reduce((acc, it) => acc + it.price * it.count, 0).toLocaleString("es-CL")}`}
onClick={() => { </strong>
setCart((cart) => </p>
cart.map((p) => <div id="cartContainer" className="flex gap-4 flex-col">
p.id === pizza.id ? { ...p, count: p.count + 1 } : p, {cart.map((pizza) => (
), <div
); className="border-3 border-lime-300 rounded-md p-2"
}} key={pizza.id}
className="bg-blue-500 px-4 text-white rounded-md" >
> <h2>Pizza {pizza.name}</h2>
+ <div className="flex gap-4">
</button> <button
<p className="text-grey-500">{pizza.count}</p> onClick={() => {
<button setCart((cart) =>
onClick={() => { cart.map((p) =>
setCart((cart) => p.id === pizza.id ? { ...p, count: p.count + 1 } : p,
cart ),
.map((p) => );
p.id === pizza.id ? { ...p, count: p.count - 1 } : p, }}
) className="bg-blue-500 px-4 text-white rounded-md"
.filter((p) => p.count > 0), >
); +
}} </button>
className="bg-red-500 px-4 text-white rounded-md" <p className="text-grey-500">{pizza.count}</p>
> <button
- onClick={() => {
</button> 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>
</div> ))}
))} </div>
</div> </section>
); );
}; };