---
import PageLayout from "@/layouts/base"
import client from "@/data/pocketbase"
import OverviewCard from "@/components/Card/OverviewCard"

const recipies = await client.collection("recipes").getFullList()
---

<PageLayout>
	<div class="flex w-full bg-yellow-100 p-5">
		<p class=" text-3xl">Reci</p>
		<p class=" text-3xl text-amber-500">pie</p>
		🥧
	</div>
	
	<div id="content" class="p-5 pt-2">
		<!-- <p class="pb-2">What would you like today?</p> -->

		<div class="grid gap-2 grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
			{
				recipies.map(r => (
					<OverviewCard recipe={r} />
				))
			}
		</div>
	</div>

</PageLayout>