31 lines
1.0 KiB
JavaScript
31 lines
1.0 KiB
JavaScript
import * as React from "react";
|
|
import Card from "@mui/material/Card";
|
|
import CardContent from "@mui/material/CardContent";
|
|
import CardMedia from "@mui/material/CardMedia";
|
|
import Typography from "@mui/material/Typography";
|
|
import { CardActionArea } from "@mui/material";
|
|
import { PRODUCT_IMAGE_DIR } from "../const";
|
|
|
|
function ProductCard({ product, onClick }) {
|
|
const productImg = `${PRODUCT_IMAGE_DIR}/${product.image}`;
|
|
|
|
return (
|
|
<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" sx={{ marginBottom: 0 }}>
|
|
{product.name}
|
|
</Typography>
|
|
</CardContent>
|
|
</CardActionArea>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
export { ProductCard };
|