spb/market-atlas

1import Link from "next/link";2import { COVERAGE_STATUS_LABEL, COVERAGE_STATUS_TONE, TIER_LABEL, TIER_TARGET } from "@/lib/coverage";3import { cx } from "@/lib/format";4import type { InstrumentCoverage } from "@/lib/types";56/** "N / T independent sources" + tier chip + coverage status. Works in server and client components. */7export function CoverageBadge({ coverage: c, className, compact }: { coverage: InstrumentCoverage; className?: string; compact?: boolean }) {8  const met = c.families >= c.target.families;9  return (10    <span className={cx("inline-flex flex-wrap items-center gap-1.5 text-xs", className)} title={`${TIER_LABEL[c.tier]} — target ${TIER_TARGET[c.tier]}. ${c.observations} fresh observation(s), ${c.proxies} proxy confirmation(s), ${c.validators} validator(s).`}>11      <span className={cx("mono inline-flex h-5 items-center rounded-[3px] px-1.5 font-medium tnum", met ? "bg-positive-soft text-positive" : "bg-surface-3 text-ink-2")}>12        {c.families} / {c.target.families} independent source{c.target.families === 1 ? "" : "s"}13      </span>14      <Link href={`/coverage?tier=${c.tier}`} className="inline-flex h-5 items-center rounded-[3px] border border-rule px-1.5 text-[10.5px] font-medium uppercase tracking-wide text-ink-2 hover:border-rule-strong" title={TIER_TARGET[c.tier]}>15        tier {c.tier}16      </Link>17      {!compact && <span className={cx("inline-flex h-5 items-center rounded-[3px] px-1.5 text-[10.5px] font-medium uppercase tracking-wide", COVERAGE_STATUS_TONE[c.status])}>{COVERAGE_STATUS_LABEL[c.status]}</span>}18      {!compact && (c.proxies > 0 || c.validators > 0) && (19        <span className="text-[11px] text-ink-3">20          {c.proxies > 0 ? `+${c.proxies} prox${c.proxies === 1 ? "y" : "ies"}` : ""}21          {c.proxies > 0 && c.validators > 0 ? " · " : ""}22          {c.validators > 0 ? `+${c.validators} validator${c.validators === 1 ? "" : "s"}` : ""}23        </span>24      )}25    </span>26  );27}28