spb/countryatlas

1import { t } from '@/i18n';2import { cn } from '@/lib/cn';3import { grouped, isNum, ordinal } from '@/lib/format';4import type { MetricValue } from '@/lib/types';56type RankFields = Pick<MetricValue, 'rank_world' | 'n_world' | 'rank_region' | 'n_region' | 'rank_year' | 'rank_is_stale'>;78/**9 * "12th of 190 · 3rd in North America". World rank always when known; region rank when `regionName` is given.10 * A `*` marks a rank computed for an older year than the indicator's latest (`rank_is_stale`).11 */12export function RankBadge({ rank, regionName, className, compact }: { rank: Partial<RankFields> | null | undefined; regionName?: string | null; className?: string; compact?: boolean }) {13  if (!rank || !isNum(rank.rank_world) || !isNum(rank.n_world)) return null;14  const world = t('metric.rankWorld', { rank: ordinal(rank.rank_world), n: grouped(rank.n_world) });15  const region = regionName && isNum(rank.rank_region) ? t('metric.rankRegion', { rank: ordinal(rank.rank_region), region: regionName }) : null;16  return (17    <span className={cn('tnum text-xs text-ink-2', className)} title={rank.rank_is_stale && rank.rank_year ? t('metric.rankYearNote', { year: rank.rank_year }) : undefined}>18      <span className="font-medium text-ink">{world}</span>19      {region && !compact ? <span className="text-ink-3"> · {region}</span> : null}20      {rank.rank_is_stale ? <sup className="text-ink-3">*</sup> : null}21    </span>22  );23}24