added modal to recipe onclick on user dashboard

app/api/recipe/route.ts

@@ -7,25 +7,34 @@ export async function GET(req: Request) {
       id: true,
       name: true,
       img: true,
-      ingredients: true,
+      ingredients: {
+        select: {
+          amount: true,
+          measurement: true,
+          ingredient: true,
+        },
+      },
       desc: true,
       price: true,
-      step: true
+      step: true,
     },
   });
 
-  return NextResponse.json(recipes)
+  return NextResponse.json(recipes);
 }
 
 export async function POST(req: Request) {
-  const { id, name, desc, price, step} = await req.json();
+  const { id, name, desc, price, step } = await req.json();
   const exists = await prisma.recipe.findUnique({
     where: {
       id,
     },
   });
   if (exists) {
-    return NextResponse.json({ error: "Recipe already exists" }, { status: 400 });
+    return NextResponse.json(
+      { error: "Recipe already exists" },
+      { status: 400 }
+    );
   } else {
     const recipe = await prisma.recipe.create({
       data: {

app/dashboard/user/page.tsx

@@ -24,13 +24,20 @@ type Category = Prisma.CategoryGetPayload<{
     ingredients: true;
   };
 }>;
+
 type Recipe = Prisma.RecipeGetPayload<{
   select: {
     id: true;
     name: true;
     img: true;
-    ingredients: true;
     step: true;
+    ingredients: {
+      select: {
+        amount: true;
+        measurement: true;
+        ingredient: { select: { name: true } };
+      };
+    };
   };
 }>;
 
@@ -180,8 +187,9 @@ export default function UserDashboard() {
               <RecipeCard
                 key={e.id}
                 name={e.name}
-                ingCount={e.ingredients.length}
-                imgPath={e?.img || "/category/fish.webp"}
+                ingredients={e.ingredients}
+                img={e.img}
+                step={e.step}
               ></RecipeCard>
             ))}
           </div>

components/RecipeCard.tsx

@@ -1,32 +1,92 @@
+import React, { FC, useState } from "react";
 import Image from "next/image";
-import { FC } from "react";
+import { Prisma } from "@prisma/client";
+import { X } from "lucide-react";
 
-interface RecipeCardProps {
-  name: string;
-  ingCount: number;
-  imgPath: string;
-}
+type Recipe = Prisma.RecipeGetPayload<{
+  select: {
+    name: true;
+    img: true;
+    step: true;
+    ingredients: {
+      select: {
+        amount: true;
+        measurement: true;
+        ingredient: {
+          select: {
+            name: true;
+          };
+        };
+      };
+    };
+  };
+}>;
+
+const RecipeCard: FC<Recipe> = ({ name, img, ingredients, step }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleModal = () => {
+    setIsOpen(!isOpen);
+  };
 
-const RecipeCard: FC<RecipeCardProps> = ({ name, ingCount, imgPath }) => {
   return (
     <>
       {/* Recipe Card */}
-      <div className="flex flex-row rounded-lg drop-shadow-xl w-80 gap-4 bg-[#fafcff] items-center">
+      <div
+        className="flex flex-row rounded-lg shadow-xl w-80 gap-4 bg-[#fafcff] items-center cursor-pointer"
+        onClick={handleModal}
+      >
         {/* Card Image */}
         <div>
           <Image
-            src={imgPath}
+            src={img ?? ""}
             alt={`${name} recipe`}
             width={96}
             height={96}
-            className="rounded-lg w-24 bg-red-300"
-          ></Image>
+            className="rounded-lg w-24"
+          />
         </div>
         {/* Recipe Details */}
         <div className="">
           <div className="text-lg">{name}</div>
           <div className="font-light text-sm">
-            You have all {ingCount} Ingredients
+            You have all {ingredients.length} Ingredients
+          </div>
+        </div>
+      </div>
+      {/* Modal */}
+      <div className={isOpen ? "modal modal-open" : "modal"}>
+        <div className="modal-box">
+          <Image
+            src={img ?? ""}
+            alt={`${name} image`}
+            width={350}
+            height={350}
+            className="w-full h-36 object-cover"
+          />
+          <div className="text-sm">
+            <h2 className="text-2xl font-bold my-4">{name}</h2>
+            <h3 className="font-semibold mb-2">Ingredients:</h3>
+            <ul className="mb-4">
+              {ingredients.map((e, i) => (
+                <li key={i}>
+                  {`- ${e.amount} ${e.measurement} ${e.ingredient.name}`}
+                </li>
+              ))}
+            </ul>
+
+            <h3 className="font-semibold mb-2">Instructions:</h3>
+            <ol>
+              {step.map((e, i) => (
+                <li key={i}>{`${i + 1}. ${e}`}</li>
+              ))}
+            </ol>
+          </div>
+          <div
+            className="absolute top-0 right-0 m-4 cursor-pointer"
+            onClick={handleModal}
+          >
+            <X />
           </div>
         </div>
       </div>