← back to Stayclaim

src/components/FactRow.tsx

38 lines

import { TierBadge, type SourceTier, isPublicTier } from './TierBadge';

/**
 * FactRow — label · value · TierBadge · optional source link.
 * Enforces the TierBadge slot — no "untiered" mode.
 * If tier is D (or invalid), the row returns null — D never renders public.
 */
export function FactRow({
  label,
  value,
  tier,
  sourceLabel,
  sourceUrl,
}: {
  label: string;
  value: React.ReactNode;
  tier: SourceTier;
  sourceLabel?: string;
  sourceUrl?: string;
}) {
  if (!isPublicTier(tier)) return null;
  return (
    <div className="flex flex-col md:flex-row md:items-baseline gap-1 md:gap-4 py-3 border-b border-ink/5">
      <dt className="md:w-48 text-xs uppercase tracking-wider text-ink/50">{label}</dt>
      <dd className="flex-1 text-base text-ink flex flex-wrap items-baseline gap-3">
        <span>{value}</span>
        {sourceUrl && /^https?:\/\//i.test(sourceUrl) ? (
          <a href={sourceUrl} target="_blank" rel="noopener noreferrer" className="underline-offset-2 hover:underline">
            <TierBadge tier={tier} sourceLabel={sourceLabel} />
          </a>
        ) : (
          <TierBadge tier={tier} sourceLabel={sourceLabel} />
        )}
      </dd>
    </div>
  );
}