spb/rareindex

1import { confidenceLabel, fmtRelative, cn } from '@/lib/format';2import { Badge } from './primitives';34/** §191: every estimate carries sample size, confidence and freshness. */5export function Evidence({ confidence, sampleSize, updatedAt, sampleLabel = 'sales', className }: { confidence: number | null | undefined; sampleSize: number | null | undefined; updatedAt: Date | string | null | undefined; sampleLabel?: string; className?: string }) {6  const label = confidenceLabel(confidence);7  const tone = label === 'High' ? 'gain' : label === 'Medium' ? 'index' : label === 'Low' ? 'alert' : 'neutral';8  return (9    <div className={cn('flex flex-wrap items-center gap-x-2 gap-y-1 text-[11px] text-muted', className)}>10      <Badge tone={tone}>Confidence: {label}</Badge>11      {sampleSize !== null && sampleSize !== undefined ? (12        <span className="num">13          {sampleSize.toLocaleString('en-US')} {sampleLabel} used14        </span>15      ) : null}16      {updatedAt ? <span>Updated {fmtRelative(updatedAt)}</span> : null}17    </div>18  );19}2021export function ScoreMeter({ value, label, tone = 'index', className }: { value: number | null | undefined; label: string; tone?: 'index' | 'rarity' | 'gain' | 'alert'; className?: string }) {22  const fill = tone === 'rarity' ? 'var(--ri-rarity)' : tone === 'gain' ? 'var(--ri-gain)' : tone === 'alert' ? 'var(--ri-alert)' : 'var(--ri-index)';23  const track = tone === 'rarity' ? 'var(--ri-rarity-bg)' : tone === 'gain' ? 'var(--ri-gain-bg)' : tone === 'alert' ? 'var(--ri-alert-bg)' : 'var(--ri-index-bg)';24  return (25    <div className={cn('flex flex-col gap-1', className)}>26      <div className="flex items-baseline justify-between text-[11px]">27        <span className="font-medium uppercase tracking-wider text-subtle">{label}</span>28        <span className="num font-semibold text-fg">{value === null || value === undefined ? '—' : `${Math.round(value)}/100`}</span>29      </div>30      <div className="h-1.5 w-full overflow-hidden rounded-full" style={{ background: track }} aria-hidden>31        {value !== null && value !== undefined ? <div className="h-full rounded-full" style={{ width: `${Math.max(0, Math.min(100, value))}%`, background: fill }} /> : null}32      </div>33    </div>34  );35}36