40 lines
1.2 KiB
JavaScript
40 lines
1.2 KiB
JavaScript
import { useContext } from "react";
|
|
import "./CardPizza.css";
|
|
import * as R from "radashi";
|
|
import { Link } from "react-router-dom";
|
|
import { CartContext } from "../context/CartContext";
|
|
|
|
/**
|
|
*
|
|
* @param {{img: string, name: string, desc: string, ingredients: string[], price: number}} props
|
|
* @returns
|
|
*/
|
|
const CardPizza = (props) => {
|
|
const { addToCart } = useContext(CartContext);
|
|
return (
|
|
<article className="card-pizza">
|
|
<img src={props.img} />
|
|
<div>
|
|
<h2 className="font-bold">Pizza {props.name}</h2>
|
|
<p className="text-gray-500">{props.desc}</p>
|
|
<p className="font-medium font-italic">Ingredientes:</p>
|
|
<ul>
|
|
{props.ingredients.map((i, index) => (
|
|
<li key={index}>- {i}</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<p className="font-bold text-green-700">${props.price.toLocaleString("es-CL")}</p>
|
|
<div className="flex gap-4">
|
|
<Link to={`/pizza/${props.id}`} className="border-black border-2 rounded-md px-4">
|
|
Ver más
|
|
</Link>
|
|
<button onClick={() => addToCart(props)} className="bg-black text-white rounded-md px-4">
|
|
Añadir
|
|
</button>
|
|
</div>
|
|
</article>
|
|
);
|
|
};
|
|
|
|
export default CardPizza;
|