Card.astro

---
import type { CollectionEntry } from "astro:content";
import { getPostUrl } from "@/utils/getPostPaths";
import { toTransitionName } from "@/utils/toTransitionName";
import Datetime from "./Datetime.astro";

type Props = {
  variant?: "h2" | "h3";
} & CollectionEntry<"posts">;

const { variant: Heading = "h2", id, data, filePath } = Astro.props;

const { title, description, ...props } = data;
---

<li class="my-6">
  <a
    href={getPostUrl(id, filePath, Astro.currentLocale)}
    class:list={[
      "text-accent inline-block text-lg font-medium",
      "decoration-dashed underline-offset-4 hover:underline",
      "focus-visible:no-underline focus-visible:underline-offset-0",
    ]}
  >
    <Heading transition:name={toTransitionName(id)}>
      {title}
    </Heading>
  </a>
  <Datetime {...props} />
  <p>{description}</p>
</li>