deployn/astro-deploy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(recipes): improve ui

Browse Source
This commit is contained in:
Jewgeni Lewash 2024-03-05 16:09:01 +01:00
parent 3a9c4da429
commit da108a149e
1 changed files with 24 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/pages/recipes.astro
View File

@ -16,17 +16,28 @@ const recipes = await directus.request(
---
<BaseLayout title="Recipes">
<div class="container mx-auto px-4 py-16 sm:py-24 lg:px-8 lg:py-32 xl:max-w-7xl">
<div class="mb-12 text-center text-zinc-900 dark:text-zinc-200">
<Heading level={1}>Recipes</Heading>
<p>Here are some of my favorite recipes.</p>
<ul>
</div>
<hr class="mb-12 dark:border-zinc-700/75" />
<ul class="grid gap-y-12 sm:grid-cols-2 sm:gap-x-6 lg:grid-cols-3 xl:gap-x-8">
{
recipes.map((recipe) => (
<li>
<h2 class="mt-4 text-xl">{recipe.name}</h2>
<p>{recipe.description}</p>
<img src={`${DIRECTUS_URL}/assets/${recipe.image}?width=250`} alt={recipe.name} />
<li class="overflow-hidden rounded-lg bg-white shadow dark:bg-zinc-800">
<img
class="h-48 w-full object-cover"
src={`${DIRECTUS_URL}/assets/${recipe.image}?width=250`}
alt={recipe.name}
/>
<div class="p-6">
<h2 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100">{recipe.name}</h2>
<p class="mt-2 text-base text-zinc-600 dark:text-zinc-400">{recipe.description}</p>
</div>
</li>
))
}
</ul>
</div>
</BaseLayout>