src/pages/index.astro

@@ -13,7 +13,9 @@ const recipies = await client.collection("recipes").getFullList()
 		<div class="grid gap-2 grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
 			{
 				recipies.map(r => (
+					<a href={`/recipe/${r.id}`}>
 						<OverviewCard recipe={r} />
+					</a>
 				))
 			}
 		</div>

src/pages/recipe/[slug].astro

@@ -0,0 +1,9 @@
+---
+import client from "@/data/pocketbase";
+const { slug } = Astro.params;
+
+const re = await client.collection("recipes").getOne(slug ?? "0");
+
+---
+
+{re.name}