Add gallery

src/app/[categorySlug]/[recipeSlug]/[imageId]/page.tsx

@@ -0,0 +1,60 @@
+import { prisma } from "@/data";
+import Image from "next/image";
+import { notFound } from "next/navigation";
+interface Params {
+  categorySlug: string;
+  recipeSlug: string;
+  imageId: string;
+}
+
+interface Props {
+  params: Promise<Params>;
+}
+export default async function Page({ params }: Props) {
+  const { imageId } = await params;
+
+  const galleryImage = await prisma.recipeGalleryImage.findUnique({
+    where: {
+      id: parseInt(imageId),
+    },
+  });
+
+  if (!galleryImage) {
+    return notFound();
+  }
+
+  return (
+    <dialog id="gallery-modal" suppressHydrationWarning>
+      <Image
+        className="w-12 object-cover"
+        src={galleryImage.imageUrl}
+        width={300}
+        height={200}
+        alt={`Zdjęcie`}
+      />
+
+      <script>document.getElementById("gallery-modal").showModal();</script>
+    </dialog>
+  );
+}
+
+export const dynamicParams = false;
+
+export async function generateStaticParams() {
+  const recipes = await prisma.recipe.findMany({
+    include: {
+      category: true,
+      galleryImages: true,
+    },
+  });
+
+  return (
+    recipes.flatMap((recipe) =>
+      recipe.galleryImages?.map((galleryImage) => ({
+        categorySlug: recipe.category.slug,
+        recipeSlug: recipe.slug,
+        imageId: galleryImage.id.toString(),
+      })),
+    ) ?? []
+  );
+}

src/app/[categorySlug]/[recipeSlug]/layout.tsx

@@ -0,0 +1,58 @@
+import { notFound } from "next/navigation";
+import { prisma } from "@/data";
+import { Recipe } from "@/components/recipe/recipe";
+
+interface Params {
+  categorySlug: string;
+  recipeSlug: string;
+}
+
+interface Props {
+  params: Promise<Params>;
+  children: React.ReactNode;
+}
+
+export default async function Layout({ params, children }: Props) {
+  const { categorySlug, recipeSlug } = await params;
+  const category = await prisma.category.findUnique({
+    where: {
+      slug: categorySlug,
+    },
+  });
+
+  if (!category) {
+    return notFound();
+  }
+
+  const recipe = await prisma.recipe.findUnique({
+    where: {
+      slug: recipeSlug,
+    },
+    include: {
+      category: true,
+      instructions: true,
+      ingredients: true,
+      galleryImages: true,
+    },
+  });
+
+  if (!recipe) {
+    return notFound();
+  }
+
+  return (
+    <div className="max-w-screen-xl mx-auto">
+      <Recipe
+        title={recipe.title}
+        coverImage={recipe.coverImage}
+        coverImageBlurDataUrl={recipe.coverImageBlurDataUrl}
+        galleryImages={recipe.galleryImages}
+        slug={recipe.slug}
+        categorySlug={recipe.category.slug}
+        ingredients={recipe.ingredients}
+        instructions={recipe.instructions}
+      />
+      {children}
+    </div>
+  );
+}

src/app/[categorySlug]/[recipeSlug]/page.tsx

@@ -1,53 +1,7 @@
-import { notFound } from "next/navigation";
 import { prisma } from "@/data";
-import { Recipe } from "@/components/recipe/recipe";
 
-interface Params {
-  categorySlug: string;
-  recipeSlug: string;
-}
-
-interface Props {
-  params: Promise<Params>;
-}
-
-export default async function Page({ params }: Props) {
-  const { categorySlug, recipeSlug } = await params;
-  const category = await prisma.category.findUnique({
-    where: {
-      slug: categorySlug,
-    },
-  });
-
-  if (!category) {
-    return notFound();
-  }
-
-  const recipe = await prisma.recipe.findUnique({
-    where: {
-      slug: recipeSlug,
-    },
-    include: {
-      instructions: true,
-      ingredients: true,
-    },
-  });
-
-  if (!recipe) {
-    return notFound();
-  }
-
-  return (
-    <div className="max-w-screen-xl mx-auto">
-      <Recipe
-        title={recipe.title}
-        coverImage={recipe.coverImage}
-        coverImageBlurDataUrl={recipe.coverImageBlurDataUrl}
-        ingredients={recipe.ingredients}
-        instructions={recipe.instructions}
-      />
-    </div>
-  );
+export default function Page() {
+  return null;
 }
 
 export const dynamicParams = false;

src/app/globals.css

@@ -8,6 +8,17 @@
   --background-end-rgb: 255, 255, 255;
 }
 
+::backdrop {
+  background-image: linear-gradient(
+    45deg,
+    magenta,
+    rebeccapurple,
+    dodgerblue,
+    green
+  );
+  opacity: 0.75;
+}
+
 @media (prefers-color-scheme: dark) {
   :root {
     --foreground-rgb: 255, 255, 255;

src/components/recipe/recipe.tsx

@@ -1,20 +1,27 @@
 import Image from "next/image";
 import { markdownToHtml } from "@/lib/markdown";
+import Link from "next/link";
 
 interface Props {
+  slug: string;
+  categorySlug: string;
   title: string;
   coverImage: string;
   coverImageBlurDataUrl: string | null;
   ingredients: { id: number; content: string }[];
   instructions: { id: number; content: string }[];
+  galleryImages: { id: number; imageUrl: string; blurDataUrl: string | null }[];
 }
 
 export async function Recipe({
+  slug,
+  categorySlug,
   title,
   coverImage,
   coverImageBlurDataUrl,
   ingredients,
   instructions,
+  galleryImages,
 }: Props) {
   return (
     <div className="flex flex-col w-full">
@@ -58,6 +65,26 @@ export async function Recipe({
           ))}
         </div>
       </div>
+
+      {galleryImages && (
+        <div>
+          {galleryImages.map((galleryImage) => (
+            <Link
+              href={`/${categorySlug}/${slug}/${galleryImage.id}`}
+              key={galleryImage.id}
+              className="mb-4"
+            >
+              <Image
+                className="w-12 object-cover"
+                src={galleryImage.imageUrl}
+                width={300}
+                height={200}
+                alt={`Zdjęcie ${title}`}
+              />
+            </Link>
+          ))}
+        </div>
+      )}
     </div>
   );
 }