نسخ من RaghadAlkhous/RestaurantDash
139 أسطر
3.4 KiB
JavaScript
139 أسطر
3.4 KiB
JavaScript
import React from "react";
|
|
import {
|
|
Box,
|
|
Typography,
|
|
Card,
|
|
CardContent,
|
|
CardMedia,
|
|
IconButton,
|
|
Chip,
|
|
} from "@mui/material";
|
|
import AddIcon from "@mui/icons-material/Add";
|
|
|
|
const MealCard = ({ meal, onClick, onAdd }) => {
|
|
const { name, price, unit, photo, image, description, additions } = meal;
|
|
|
|
|
|
|
|
return (
|
|
<Card
|
|
onClick={onClick}
|
|
sx={{
|
|
width: { xs: "160px", md: "160px" },
|
|
height: 250,
|
|
borderRadius: "20px",
|
|
p: "15px",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
backgroundColor: "#FCFCFC",
|
|
boxShadow: "none",
|
|
border: "1px solid #f0f0f0",
|
|
cursor: "pointer",
|
|
transition: "transform 0.2s ease-in-out",
|
|
"&:hover": { transform: "scale(1.02)" },
|
|
}}
|
|
>
|
|
{/* صورة الوجبة */}
|
|
<CardMedia
|
|
component="img"
|
|
image={photo || "/images/default-product.png"}
|
|
alt={name}
|
|
sx={{
|
|
width: "120px",
|
|
height: "120px",
|
|
objectFit: "cover",
|
|
borderRadius: "12px",
|
|
// mb: 1,
|
|
pointerEvents: "none",
|
|
}}
|
|
/>
|
|
|
|
{/* تفاصيل الوجبة */}
|
|
<CardContent sx={{ p: 0, width: "100%", textAlign: "center" }}>
|
|
<Typography variant="body1" fontWeight={600} fontSize={16} noWrap>
|
|
{name}
|
|
</Typography>
|
|
|
|
{/* السعر */}
|
|
<Typography
|
|
variant="body2"
|
|
fontWeight={600}
|
|
sx={{ color: "#FF914D", fontSize: "15px", mt: 0.5 }}
|
|
>
|
|
${price}{" "}
|
|
<Typography
|
|
component="span"
|
|
variant="caption"
|
|
color="text.secondary"
|
|
>
|
|
{unit || "/pcs"}
|
|
</Typography>
|
|
</Typography>
|
|
|
|
{/* الوصف (أول عنصر فقط للتصغير) */}
|
|
{description && description.length > 0 && (
|
|
<Typography
|
|
variant="caption"
|
|
color="text.secondary"
|
|
noWrap
|
|
sx={{ display: "block", mt: 0.5 }}
|
|
>
|
|
{description[0]}
|
|
</Typography>
|
|
)}
|
|
|
|
{/* الإضافات (أول 2 فقط) */}
|
|
{/* {additions && additions.length > 0 && (
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
flexWrap: "wrap",
|
|
gap: 0.5,
|
|
mt: 1,
|
|
}}
|
|
>
|
|
{additions.slice(0, 2).map((add, i) => (
|
|
<Chip
|
|
key={i}
|
|
label={add}
|
|
size="small"
|
|
sx={{
|
|
fontSize: "10px",
|
|
height: 18,
|
|
borderRadius: "8px",
|
|
}}
|
|
/>
|
|
))}
|
|
</Box>
|
|
)} */}
|
|
|
|
{/* زر الإضافة */}
|
|
{/* <IconButton
|
|
color="primary"
|
|
size="small"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
if (onAdd) onAdd(meal);
|
|
}}
|
|
sx={{
|
|
backgroundColor: "#FF8551",
|
|
color: "#fff",
|
|
mt: 1,
|
|
width: 28,
|
|
height: 28,
|
|
"&:hover": { backgroundColor: "#ff7043" },
|
|
}}
|
|
>
|
|
<AddIcon fontSize="small" />
|
|
</IconButton> */}
|
|
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default MealCard;
|