phobos/src/components/Card.astro
2024-06-30 21:16:36 +02:00

30 lines
721 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-64">
<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-gray-700 opacity-60 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>