troylusty.com/src/components/ShowcaseProject.astro

41 lines
1.2 KiB
Text
Raw Normal View History

---
import { Image } from "astro:assets";
import FormattedDate from "@components/FormattedDate.astro";
type Props = {
collection: any;
};
const { collection } = Astro.props;
---
<li>
<article class="flex-col overflow-clip">
<a href={`/${collection.collection}/${collection.slug}`} class="group">
<div class="overflow-hidden rounded-md">
<Image
src={collection.data.image.url}
alt={collection.data.image.alt}
title={collection.data.title}
loading="eager"
class="aspect-square object-cover transition-transform duration-300 ease-in-out group-hover:scale-102"
fit="cover"
/>
</div>
<article class="flex flex-col">
<h3 class="mb-1 font-semibold text-balance">
<span class="text-secondary">{collection.data.title}</span><span
class="text-tertiary group-hover:text-accent ml-2 transition-colors"
>{collection.data.description}</span
>
</h3>
<time class="text-accent block text-sm"
><time>
<FormattedDate date={collection.data.date} />
</time></time
>
</article>
</a>
</article>
</li>