← back to Stayclaim

src/components/ProvenanceFooter.tsx

63 lines

/**
 * ProvenanceFooter — "why is this page here" transparency block.
 *
 * Per the audit's transparency mandate: every public address page tells
 * the reader exactly how many sources back it, what tiers they came from,
 * when the record was last updated, and where to read the source rules.
 */

type Counts = { A: number; B: number; C: number };

export function ProvenanceFooter({
  counts,
  lastUpdated,
}: {
  counts: Counts;
  lastUpdated?: Date | string | null;
}) {
  const total = counts.A + counts.B + counts.C;
  const updated =
    lastUpdated instanceof Date
      ? lastUpdated
      : lastUpdated
        ? new Date(lastUpdated)
        : null;

  return (
    <section className="border-t border-ink/10 bg-ink/[0.02]">
      <div className="max-w-6xl mx-auto px-6 py-8 grid md:grid-cols-[1fr_auto] gap-6 items-baseline">
        <div>
          <p className="text-xs uppercase tracking-[0.15em] text-ink/50 mb-2">
            Why this page is in the archive
          </p>
          <p className="text-sm text-ink/75 leading-relaxed max-w-prose">
            This page is published because we have <strong>{total}</strong>{' '}
            {total === 1 ? 'public source' : 'public sources'} backing it —
            <span className="font-mono text-[12px] mx-1">
              {counts.A} Tier-A · {counts.B} Tier-B · {counts.C} Tier-C
            </span>
            . Tier-A is government / institutional record. Tier-B is library
            or archival collection. Tier-C is verified secondary. Discovery
            leads (Tier-D) never appear on public pages.
          </p>
        </div>
        <div className="text-[10px] uppercase tracking-[0.15em] text-ink/45 md:text-right">
          {updated && !Number.isNaN(updated.getTime()) && (
            <p>
              Record updated{' '}
              <time dateTime={updated.toISOString()} className="font-mono">
                {updated.toISOString().slice(0, 10)}
              </time>
            </p>
          )}
          <p>
            <a href="/about" className="hover:text-coral transition">
              Source rules →
            </a>
          </p>
        </div>
      </div>
    </section>
  );
}