31 lines
1.0 KiB
Plaintext
31 lines
1.0 KiB
Plaintext
---
|
|
import client from "@/data/pocketbase"
|
|
import TagRow from "./TagRow.astro"
|
|
|
|
const { recipe } = Astro.props;
|
|
|
|
const headerImage = await client.collection("images").getOne(recipe.images[0])
|
|
const image = await client.files.getURL(headerImage, headerImage.image)
|
|
---
|
|
|
|
<div class="relative z-0 flex h-50">
|
|
<img
|
|
class="w-full h-full object-cover rounded-xl"
|
|
src={ image }
|
|
/>
|
|
|
|
<div id="bottom-info-panel" class="absolute bottom-0 left-0 w-full p-2 h-20 backdrop-filter backdrop-blur-lg rounded-b-xl z-1">
|
|
<p id="recipe-name" class="text-[14pt] text-white opacity-90 font-bold line-clamp-1" >{recipe.name}</p>
|
|
<!-- <p id="recipe-desc" class="text-white text-[10pt]"> {recipe.description} </p> -->
|
|
|
|
<div id="tag-row" class="">
|
|
<TagRow tagIds={recipe.tags}/>
|
|
</div>
|
|
</div>
|
|
|
|
<a id="link" href={`/recipe/${recipe.id}`} class="absolute inset-0 z-0">
|
|
<span class="block w-full h-full hover:bg-black/10 transition-colors">
|
|
</span>
|
|
</a>
|
|
|
|
</div> |