Intis/prezentacija-komponiranje
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Product detail modal

Browse Source
This commit is contained in:
Eden Kirin
2024-01-23 22:32:11 +01:00
parent 0a344ed1ce
commit ea7c54a5dc
10 changed files with 98 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/src/components/ProductCard.js
View File

@ -6,20 +6,21 @@ import Typography from "@mui/material/Typography";
import { CardActionArea } from "@mui/material";
import { PRODUCT_IMAGE_DIR } from "../const";
function ProductCard({ product }) {
const productImg = `${PRODUCT_IMAGE_DIR}${product.image}`;
function ProductCard({ product, onClick }) {
const productImg = `${PRODUCT_IMAGE_DIR}/${product.image}`;
return (
<Card>
<CardActionArea>
<CardMedia component="img" height="140" image={productImg} alt={product.name} />
<Card sx={{ width: "100%" }}>
<CardActionArea
onClick={() => {
onClick(product.id);
}}
>
<CardMedia component="img" height="200" image={productImg} alt={product.name} />
<CardContent>
<Typography gutterBottom variant="h5" component="div">
<Typography gutterBottom variant="h5" component="div" sx={{ marginBottom: 0 }}>
{product.name}
</Typography>
<Typography variant="body2" color="text.secondary">
{product.description}
</Typography>
</CardContent>
</CardActionArea>
</Card>