52 lines
1.3 KiB
Text
52 lines
1.3 KiB
Text
|
---
|
||
|
|
import { Image } from "astro:assets";
|
||
|
|
import FormattedDate from "@components/FormattedDate.astro";
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
collection: any;
|
||
|
|
};
|
||
|
|
|
||
|
|
const { collection } = Astro.props;
|
||
|
|
---
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<article
|
||
|
|
class="group relative isolate mx-auto flex w-full flex-col justify-end overflow-hidden rounded-lg px-8 pb-8 pt-40"
|
||
|
|
>
|
||
|
|
<Image
|
||
|
|
src={collection.data.image.url}
|
||
|
|
alt={collection.data.image.alt}
|
||
|
|
title={collection.data.title}
|
||
|
|
loading="eager"
|
||
|
|
class="absolute inset-0 h-full w-full object-cover duration-300 ease-in-out group-hover:scale-105"
|
||
|
|
fit="cover"
|
||
|
|
/>
|
||
|
|
<div
|
||
|
|
class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent"
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<a
|
||
|
|
class="absolute inset-0 z-20"
|
||
|
|
href={`/${collection.collection}/${collection.slug}`}
|
||
|
|
aria-label={collection.data.title}></a>
|
||
|
|
<h3
|
||
|
|
class="z-10 mt-3 w-fit text-xl font-semibold text-primary dark:text-secondary"
|
||
|
|
>
|
||
|
|
{collection.data.title}
|
||
|
|
</h3>
|
||
|
|
<div
|
||
|
|
class="z-10 w-fit gap-y-1 overflow-hidden text-sm leading-6 text-accent"
|
||
|
|
>
|
||
|
|
{
|
||
|
|
collection.data.collection ? (
|
||
|
|
<span>
|
||
|
|
<FormattedDate date={collection.data.date} /> • Collection
|
||
|
|
</span>
|
||
|
|
) : (
|
||
|
|
<FormattedDate date={collection.data.date} />
|
||
|
|
)
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
</li>
|