MyBlog-Next/src/components/Card.astro

---
import Datetime from "./Datetime.astro";
import type { Frontmatter } from "@utils/types";

export interface Props {
  href?: string;
  post: Frontmatter;
  secHeading?: boolean;
}

const { href, post, secHeading = true } = Astro.props;
---

<li>
  <a href={href}>
    {secHeading ? <h2>{post.title}</h2> : <h3>{post.title}</h3>}
  </a>
  <Datetime datetime={post.datetime} />
  <p>
    {post.description}
  </p>
</li>

<style>
  li {
    @apply my-6;
  }
  a {
    @apply text-skin-accent font-medium text-lg underline-offset-4 decoration-dashed focus-visible:underline;
  }
  a h2,
  a h3 {
    @apply font-medium text-lg decoration-dashed hover:underline;
  }
  .date-time-wrapper {
    @apply opacity-80;
  }
  .calendar {
    @apply scale-90;
  }
  .date-time {
    @apply italic text-sm;
  }
  svg {
    @apply w-6 h-6 inline-block fill-skin-base;
  }
</style>