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,16 +77,21 @@ const MenuItem = ({ food }: MenuItemProps) => {
     removeFromCart(food.id);
   };
 
+  const foodDetailUrl = `/${name}/${food.id}`;
+
   return (
     <div className="flex gap-4 w-full h-full items-center">
+      <Link href={foodDetailUrl} className="cursor-pointer">
         <Image
-        className="rounded-xl w-28 h-28 object-cover"
+          className="rounded-xl min-w-28 w-28 h-28 object-cover"
           src={resolvedImage}
           height={112}
           width={112}
           alt={foodName}
         />
+      </Link>
       <div className="w-full inline-flex flex-col justify-between">
+        <Link href={foodDetailUrl} className="cursor-pointer">
           <div>
             <div className="text-sm2 font-normal text-black dark:text-white">
               {foodName}
@@ -93,6 +102,7 @@ const MenuItem = ({ food }: MenuItemProps) => {
               </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