PostCard.astro

---
/**
 * PostCard Pattern Component
 *
 * An article card with a label, title, and author avatar(s).
 *
 * @example — Single author
 * <PostCard
 *   href="/blog/secure-express-app"
 *   labels={["Security"]}
 *   title="How to secure your Express app"
 *   coverSrc="/images/cover.jpg"
 *   authors={[{ src: "/images/author.jpg", name: "John Doe" }]}
 *   avatarCaption="Jun 05, 2025"
 * />
 *
 * @example — Multiple authors
 * <PostCard
 *   href="/blog/express-5"
 *   labels={["Release"]}
 *   title="Express 5.0 is here"
 *   coverSrc="/images/cover.jpg"
 *   authors={[
 *     { src: "/images/author1.jpg", name: "Jane Smith" },
 *     { src: "/images/author2.jpg", name: "John Doe" },
 *   ]}
 *   avatarCaption="Mar 04, 2026"
 * />
 */
import './PostCard.css';
import type { HTMLAttributes } from 'astro/types';
import { Image } from 'astro:assets';
import { H3, Avatar, Tag } from '@components/primitives';

interface Author {
  src: string;
  alt?: string;
  name: string;
}

interface Props extends HTMLAttributes<'article'> {
  href: string;
  labels: string[];
  title: string;
  coverSrc?: string;
  coverAlt?: string;
  authors: Author[];
  avatarCaption?: string;
}

const {
  href,
  labels,
  title,
  coverSrc,
  coverAlt = '',
  authors,
  avatarCaption,
  class: className,
  ...rest
} = Astro.props;
---

<article class:list={['post-card', className]} {...rest}>
  <a href={href} class="post-card__link">
    <div>
      <!-- TODO: this will replaced by auto-generated OG images -->
      {
        coverSrc && (
          <Image
            class="post-card__cover"
            src={coverSrc}
            alt={coverAlt || ''}
            width={800}
            height={160}
            loading="eager"
          />
        )
      }
      <div class="post-card__labels">
        {labels.map((label) => <Tag>{label}</Tag>)}
      </div>
      <H3 as="h2" vMargin={false} class="post-card__title">
        {title}
      </H3>
    </div>
    <Avatar authors={authors} caption={avatarCaption} size="md" />
  </a>
</article>