68 lines
2.0 KiB
JavaScript
68 lines
2.0 KiB
JavaScript
import React from "react";
|
|
import Pictograms from "./Pictograms";
|
|
import { extractTags } from "../../Services";
|
|
import { useHistory } from "react-router-dom";
|
|
import KeyboardArrowRightIcon from "@material-ui/icons/KeyboardArrowRight";
|
|
|
|
export default function CardDish(props) {
|
|
const history = useHistory();
|
|
const {
|
|
name,
|
|
prices,
|
|
imgUrl,
|
|
weight,
|
|
vegan,
|
|
vegetarian,
|
|
allergens,
|
|
_id,
|
|
} = props.dish;
|
|
|
|
const FormatPrices = () => {
|
|
if (prices.price1.priceName === "") {
|
|
return(
|
|
<h5>{ prices.price1.price }zł</h5>
|
|
)
|
|
} else {
|
|
return (
|
|
<div className="carddish-prices-multi">
|
|
{prices.price1.priceName !== "" && <h5>{prices.price1.price}zł ({ prices.price1.priceName })</h5>}
|
|
{prices.price2.priceName !== "" && <h5>{prices.price2.price}zł ({prices.price2.priceName})</h5>}
|
|
{prices.price3.priceName !== "" && <h5>{prices.price3.price}zł ({ prices.price3.priceName })</h5>}
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className="carddish-container"
|
|
onClick={() => history.push(`/dish/${_id}`)}
|
|
>
|
|
<div className="carddish-left">
|
|
<div
|
|
className="carddish-img"
|
|
style={{ backgroundImage: "url(" + imgUrl + ")" }}
|
|
/>
|
|
<div className="carddish-left-info">
|
|
<div className="carddish-left-upper">
|
|
<h2>{name}</h2>
|
|
<div className="carddish-left-middle">
|
|
<p>Porcja: {weight}</p>
|
|
<p>
|
|
{(vegan & vegetarian) ? "wegańskie | wegetariańskie" : ""}
|
|
{(vegan & !vegetarian) ? "wegańskie" : ""}
|
|
{(!vegan & vegetarian) ? "wegetariańskie" : ""}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<Pictograms pictograms={extractTags(allergens)} />
|
|
</div>
|
|
</div>
|
|
<div className="carddish-right">
|
|
<FormatPrices/>
|
|
<KeyboardArrowRightIcon color="primary" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|