aragrp/components/changelog-version-card.tsx

import {
  CHANGELOG_SECTION_LABELS,
  type ChangelogRelease,
} from "@/lib/changelog-types";
import {
  buildReleaseParagraph,
  formatReleaseDate,
  shouldUseParagraphSummary,
} from "@/lib/changelog-display";
import { ChangelogItem } from "@/components/changelog-item";
import { cn } from "@/lib/utils";
import { APP_VERSION } from "@/lib/version";

type ChangelogVersionCardProps = {
  release: ChangelogRelease;
};

export function ChangelogVersionCard({ release }: ChangelogVersionCardProps) {
  const isCurrent = release.version === APP_VERSION;
  const useParagraph =
    Boolean(release.summary) ||
    shouldUseParagraphSummary(release.sections);

  return (
    <article
      className={cn(
        "rounded-xl border bg-card text-left shadow-sm",
        isCurrent && "border-primary/30 ring-1 ring-primary/15"
      )}
    >
      <div className="p-4">
        <header>
          <div className="flex flex-wrap items-center gap-2">
            <h2 className="font-mono text-base font-semibold tracking-tight text-foreground">
              v{release.version}
            </h2>
            {isCurrent && (
              <span className="rounded-full bg-primary/10 px-2 py-0.5 text-[11px] font-medium text-primary">
                Current Version
              </span>
            )}
          </div>
          <time
            className="mt-1.5 block text-xs text-muted-foreground"
            dateTime={release.date}
            dir="ltr"
          >
            {formatReleaseDate(release.date)}
          </time>
        </header>

        <div
          className="my-4 h-px bg-border/70"
          role="separator"
          aria-hidden
        />

        <div className="text-left text-[13px] leading-relaxed text-muted-foreground">
          {release.summary ? (
            <p>{release.summary}</p>
          ) : useParagraph ? (
            <p>{buildReleaseParagraph(release.sections)}</p>
          ) : (
            <div className="space-y-2">
              {release.sections.map((section) => (
                <section key={section.title}>
                  <h3 className="mb-1 text-[13px] font-medium text-foreground/80">
                    {CHANGELOG_SECTION_LABELS[section.title]}
                  </h3>
                  <ul className="space-y-1 ps-4">
                    {section.items.map((item, index) => (
                      <ChangelogItem key={index} text={item} />
                    ))}
                  </ul>
                </section>
              ))}
            </div>
          )}
        </div>
      </div>
    </article>
  );
}