phobos/src/components/Card.astro
2024-07-26 22:07:02 +02:00

30 lines
722 B
Text

---
import pb from "../lib/pb";
const { href, title, body, image } = Astro.props;
let imageURL;
if (image) {
imageURL = pb.files.getUrl(image, image.file);
}
---
<div class="relative max-w-xl mx-auto mt-20 h-32 w-55">
<a href={href} class="block">
{
image && (
<img
class="h-32 w-64 object-cover rounded-md"
src={imageURL}
alt={`Cover for ${title}`}
/>
)
}
<div class="absolute inset-0 bg-[#111111] opacity-50 rounded-md"></div>
<div class="absolute inset-0 inline-flex flex-col items-center justify-center">
<h2 class="text-white text-3xl font-bold">{title}</h2>
<span class="text-white">{body}</span>
</div>
</a>
</div>