Initial commit - restaurant dashboard

src/components/Home/Meal/contect/MealCard.js

@@ -0,0 +1,138 @@
+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;