food content

src/components/listview/MenuItem.tsx

@@ -39,10 +39,26 @@ const MenuItem = ({ food }: MenuItemProps) => {
     [food.name, food.title, food.foodName]
   );
 
-  const foodDescription = useMemo(
-    () => food.description || food.desc || food.content || '',
-    [food.description, food.desc, food.content]
-  );
+  const foodContent = useMemo(() => {
+    const content = food.content;
+    if (!content) return '';
+
+    if (Array.isArray(content)) {
+      return content.filter(item => item && typeof item === 'string').join('، ');
+    }
+
+    if (typeof content === 'string') {
+      return content.replace(/,/g, '،');
+    }
+
+    return '';
+  }, [food.content]);
+
+  const foodDescription = useMemo(() => {
+    const desc = food.description || food.desc;
+    if (!desc || typeof desc !== 'string') return '';
+    return desc.replace(/,/g, '،');
+  }, [food.description, food.desc]);
 
   const formattedPrice = useMemo(
     () => (food.price ? food.price.toLocaleString('fa-IR') : '0'),
@@ -71,9 +87,9 @@ const MenuItem = ({ food }: MenuItemProps) => {
           <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}
+          {(foodContent || foodDescription) && (
+            <div className="text-[#7F7F7F] line-clamp-2 text-xs leading-5 font-normal mt-2">
+              {foodContent || foodDescription}
             </div>
           )}
         </div>