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

37
src/pages/recipes.astro
View File

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