troylusty.com/src/components/ShowcaseProject.astro

---
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 h-full w-full flex-col justify-end overflow-hidden rounded px-8 pt-40 pb-8"
  >
    <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 transition-all duration-300 group-hover:brightness-50"
      fit="cover"
    />

    <a
      class="absolute inset-0 z-20"
      href={`/${collection.collection}/${collection.slug}`}
      aria-label={collection.data.title}></a>
    <h3
      class="z-10 w-fit text-xl font-semibold text-white opacity-0 transition-opacity duration-300 group-hover:opacity-100"
    >
      {collection.data.title}
    </h3>
    <div
      class="z-10 w-fit gap-y-1 overflow-hidden text-sm leading-6 text-neutral-400 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
    >
      {
        collection.data.collection ? (
          <span>
            <FormattedDate date={collection.data.date} /> (Collection)
          </span>
        ) : (
          <FormattedDate date={collection.data.date} />
        )
      }
    </div>
  </article>
</li>