got da card working

web/src/pages/index.astro

@@ -3,20 +3,27 @@ import { Recipe } from "@tmlmt/cooklang-parser"
 import { authPB } from "@data/pb";
 import RecipeCard from "@component/index/card"
 import Base from "@layout/Base";
+import { record } from "astro:schema";
 
 const pb = await authPB()
 const records = await pb.collection('recipes').getFullList()
 
 const recipes = records.map(r => new Recipe(r.cooklang))
+const ids = records.map(r => r.id)
+const images = await Promise.all(
+	records.map(r => pb.files.getURL(r, r.images[0])) // get first image from each recipe as a cover image
+)
 ---
 
 <Base>
 	{
-		recipes.map(r => (
+		recipes.map((r, i) => (
 			<RecipeCard
+				id={ids[i]}
 				title={r.metadata.title ?? "Untitled Recipe"}
 				description={r.metadata.description ?? "No Description"}
 				tags={r.metadata.tags ?? []}
+				image={images[i]}
 			/>
 		))
 	}