list of foods and categories

src/components/listview/MenuItem.tsx

@@ -8,10 +8,15 @@ import { useReceiptStore } from "@/zustand/receiptStore";
 import { motion } from "framer-motion";
 interface MenuItemProps {
   food: {
-    id: number
-    name: string;
-    contains: string;
-    price: string;
+    id: string | number;
+    name?: string;
+    title?: string;
+    foodName?: string;
+    description?: string;
+    desc?: string;
+    content?: string;
+    price: number;
+    image?: string;
   };
 }
 
@@ -21,24 +26,35 @@ const MenuItem = ({ food }: MenuItemProps) => {
   const increment = useReceiptStore(state => state.increment);
   const decrement = useReceiptStore(state => state.decrement);
 
+  if (!food) return null;
+
+  const foodName = food.name || food.title || food.foodName || 'بدون نام';
+  const foodDescription = food.description || food.desc || food.content || '';
+
   return (
     <div className="flex gap-4 w-full h-full">
       <Image
         className="rounded-xl w-28 h-28"
-        src={"/assets/images/food-preview.png"}
+        src={food.image || "/assets/images/food-preview.png"}
         height={100}
         width={100}
         alt="Food image"
       />
       <div className="w-full inline-flex flex-col justify-between">
         <div>
-          <div className="text-sm2 font-normal text-black dark:text-white">{food.name}</div>
-          <div className="text-[#7F7F7F] text-xs leading-5 font-normal mt-2">
-            {food.contains}
+          <div className="text-sm2 font-normal text-black dark:text-white">
+            {foodName}
           </div>
+          {foodDescription && (
+            <div className="text-[#7F7F7F] text-xs leading-5 font-normal mt-2">
+              {foodDescription}
+            </div>
+          )}
         </div>
         <div className="inline-flex gap-2 justify-between w-full items-center">
-          <span className="w-full text-sm mt-1" dir="ltr">{food.price} T</span>
+          <span className="w-full text-sm mt-1" dir="ltr">
+            {food.price ? food.price.toLocaleString('fa-IR') : '0'} T
+          </span>
           <motion.div
             whileTap={{ scale: 1.05 }}
             className="bg-background active:drop-shadow-xs max-w-[115px] rounded-md w-full h-8 inline-flex p-1 justify-between items-center gap-2"