achat-maison-albi-fr/src/components/ui/cards/CardBlog.astro

---
// Import necessary components and utilities
import AvatarBlog from "../avatars/AvatarBlog.astro";
import { Image } from "astro:assets";
import { formatDate } from "../../../utils";
import type { CollectionEntry } from "astro:content";

// Define data sources from Astro props
const { blogEntry } = Astro.props;

// Define TypeScript props interface
interface Props {
  blogEntry: CollectionEntry<"blog">;
}
---

<!-- The following anchor tag is the main container for the card.
     It's a link to the blog post detailed page.
     The data-astro-prefetch is a Astro.js specific Dynamic HTML feature,
     which automatically prefetches the linked page to speed up navigation. -->
<a
  class="group relative block rounded-xl outline-none ring-zinc-500 transition duration-500 focus-visible:ring dark:ring-zinc-200 dark:focus:outline-none"
  href={`/blog/${blogEntry.slug}/`}
  data-astro-prefetch
>
  <!-- The container for the blog post's cover image. Uses astro:assets' Image for image source -->
  <div
    class="relative h-[350px] w-full flex-shrink-0 overflow-hidden rounded-xl before:absolute before:inset-x-0 before:z-[1] before:size-full before:bg-gradient-to-t before:from-neutral-900/[.7]"
  >
    <Image
      class="absolute start-0 top-0 size-full object-cover transition duration-500 group-hover:scale-110"
      src={blogEntry.data.cardImage}
      alt={blogEntry.data.cardImageAlt}
      draggable={"false"}
      format={"avif"}
    />
  </div>
  <!-- The container for the blog author's avatar and associated metadata (author name and publication date) -->
  <div class="absolute inset-x-0 top-0 z-10">
    <div class="flex h-full flex-col p-4 sm:p-6">
      <div class="flex items-center">
        <AvatarBlog blogEntry={blogEntry} />

        <div class="ms-2.5 sm:ms-4">
          <h4 class="font-bold text-neutral-50">
            {blogEntry.data.author}
          </h4>
          <p class="text-xs text-neutral-50/[.8]">
            {formatDate(blogEntry.data.pubDate)}
          </p>
        </div>
      </div>
    </div>
  </div>
  <!-- The container for the blog post's title and description -->
  <div class="absolute inset-x-0 bottom-0 z-10">
    <div class="flex h-full flex-col p-4 sm:p-6">
      <h3
        class="text-balance text-lg font-bold text-neutral-50 group-hover:text-neutral-50/[.8] sm:text-3xl"
      >
        {blogEntry.data.title}
      </h3>
      <p class="mt-2 text-pretty text-neutral-50/[.8]">
        {blogEntry.data.description}
      </p>
    </div>
  </div>
</a>