food link to single

src/components/listview/MenuItem.tsx

@@ -2,6 +2,8 @@
 
 import { memo, useMemo } from "react";
 import Image from "next/image";
+import Link from "next/link";
+import { useParams } from "next/navigation";
 import PlusIcon from "@/components/icons/PlusIcon";
 import MinusIcon from "@/components/icons/MinusIcon";
 import { useCart } from "@/app/[name]/(Dialogs)/cart/hook/useCart";
@@ -14,6 +16,8 @@ interface MenuItemProps {
 
 const MenuItem = ({ food }: MenuItemProps) => {
   const { items, addToCart, removeFromCart } = useCart();
+  const params = useParams<{ name: string }>();
+  const name = params?.name || '';
 
   const quantity = useMemo(() => {
     const item = items?.[food.id];
@@ -73,26 +77,32 @@ const MenuItem = ({ food }: MenuItemProps) => {
     removeFromCart(food.id);
   };
 
+  const foodDetailUrl = `/${name}/${food.id}`;
+
   return (
     <div className="flex gap-4 w-full h-full items-center">
-      <Image
+      <Link href={foodDetailUrl} className="cursor-pointer">
-        className="rounded-xl w-28 h-28 object-cover"
+        <Image
-        src={resolvedImage}
+          className="rounded-xl min-w-28 w-28 h-28 object-cover"
-        height={112}
+          src={resolvedImage}
-        width={112}
+          height={112}
-        alt={foodName}
+          width={112}
-      />
+          alt={foodName}
+        />
+      </Link>
       <div className="w-full inline-flex flex-col justify-between">
-        <div>
+        <Link href={foodDetailUrl} className="cursor-pointer">
-          <div className="text-sm2 font-normal text-black dark:text-white">
+          <div>
-            {foodName}
+            <div className="text-sm2 font-normal text-black dark:text-white">
-          </div>
+              {foodName}
-          {(foodContent || foodDescription) && (
-            <div className="text-[#7F7F7F] line-clamp-2 text-xs leading-5 font-normal mt-2">
-              {foodContent || foodDescription}
             </div>
-          )}
+            {(foodContent || foodDescription) && (
-        </div>
+              <div className="text-[#7F7F7F] line-clamp-2 text-xs leading-5 font-normal mt-2">
+                {foodContent || foodDescription}
+              </div>
+            )}
+          </div>
+        </Link>
         <div className="inline-flex mt-2 gap-2 justify-between w-full items-center">
           <span className="w-full text-sm mt-1" dir="ltr">
             {formattedPrice} T