Fix lists by tag

src/app/[categorySlug]/page.tsx

@@ -1,5 +1,6 @@
 import { notFound } from 'next/navigation';
-import Link from 'next/link'
+import { RecipeListItem } from '@/components/recipe-list-item/recipe-list-item'
+import { RecipeList } from '@/components/recipe-list/recipe-list'
 import { prisma } from '@/data'
 
 interface Params {
@@ -31,15 +32,18 @@ export default async function Page({ params }: Props) {
   })
 
   return (
-    <main className="flex flex-col items-center">
-
-      {recipes.map((recipe) => (
-        <div key={recipe.id} className="flex place-items-center">
-          <Link href={`/${recipe.category.slug}/${recipe.slug}`}>
-            {recipe.title}
-          </Link>
-        </div>
-      ))}
+    <main className="w-full">
+      <h2 className="text-2xl my-8">Przepisy w kategorii {category.title}</h2>
+      <RecipeList>
+        {recipes.map((recipe) => (
+          <RecipeListItem
+            key={recipe.id}
+            href={`/${recipe.category.slug}/${recipe.slug}`}
+            coverImage={recipe.coverImage}
+            title={recipe.title}
+          />
+        ))}
+      </RecipeList>
     </main >
   )
 }

src/app/tag/[slug]/page.tsx

@@ -0,0 +1,54 @@
+import { notFound } from 'next/navigation'
+import { prisma } from '@/data'
+import { RecipeListItem } from '@/components/recipe-list-item/recipe-list-item'
+import { RecipeList } from '@/components/recipe-list/recipe-list'
+
+interface Params {
+  slug: string
+}
+
+interface Props {
+  params: Params
+}
+
+export default async function Page({ params }: Props) {
+  const tag = await prisma.tag.findUnique({
+    where: {
+      slug: params.slug
+    }
+  })
+
+  if (!tag) {
+    return notFound()
+  }
+
+  const recipes = await prisma.recipe.findMany({
+    where: {
+      tags: {
+        some: {
+          id: tag.id
+        }
+      }
+    },
+    include: {
+      category: true,
+    }
+  })
+
+  return (
+    <main className="w-full">
+      <h2 className="text-2xl my-8">Przepisy w kategorii {tag.title}</h2>
+
+      <RecipeList>
+        {recipes.map((recipe) => (
+          <RecipeListItem
+            key={recipe.id}
+            href={`/${recipe.category.slug}/${recipe.slug}`}
+            coverImage={recipe.coverImage}
+            title={recipe.title}
+          />
+        ))}
+      </RecipeList>
+    </main >
+  )
+}