67 lines
2.1 KiB
JavaScript
67 lines
2.1 KiB
JavaScript
import { useContext, useState } from "react";
|
|
import { CartContext } from "../context/CartContext";
|
|
import { pizzaCart } from "../pizzas";
|
|
import { UserContext } from "../context/UserContext";
|
|
|
|
const Cart = () => {
|
|
const { token } = useContext(UserContext);
|
|
const { cart, setCart } = useContext(CartContext);
|
|
return (
|
|
<>
|
|
<h1 className="text-4xl font-bold">Carrito</h1>
|
|
<div id="cartContainer" className="flex gap-4 flex-col">
|
|
{cart.map((pizza) => (
|
|
<div
|
|
className="border-3 border-lime-300 rounded-md flex gap-4 overflow-hidden"
|
|
key={pizza.id}
|
|
>
|
|
<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>
|
|
))}
|
|
<p className="text-3xl">
|
|
Total:
|
|
<strong>
|
|
{` $${cart.reduce((acc, it) => acc + it.price * it.count, 0).toLocaleString("es-CL")}`}
|
|
</strong>
|
|
</p>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
disabled={!token}
|
|
className="bg-black text-white rounded-md p-2 text-lg hover:bg-gray-500 disabled:bg-gray-200"
|
|
>
|
|
Pagar
|
|
</button>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Cart;
|