spb/company-atlas

1import Link from 'next/link';2import { CompanyTable } from '@/components/company/company-table';3import { cn } from '@/lib/cn';4import { fmtInt, fmtPctSigned, fmtScore, fmtSigned } from '@/lib/format';5import { RANKING_KINDS, RANKING_WINDOWS, routes } from '@/lib/site';6import type { Rankings } from '@/lib/types';78export function RankingTabs({ kind, window, country, industry }: { kind: string; window: string; country?: string; industry?: string }) {9  const href = (k: string, w: string) => `${routes.rankings(k, w)}${country ? `&country=${country}` : ''}${industry ? `&industry=${industry}` : ''}`;10  return (11    <div className="space-y-2">12      <div className="no-scrollbar -mx-4 flex gap-1.5 overflow-x-auto px-4 md:mx-0 md:flex-wrap md:px-0" role="tablist" aria-label="Ranking">13        {RANKING_KINDS.map((k) => (14          <Link key={k.id} href={href(k.id, window)} className="chip-btn" data-on={k.id === kind} role="tab" aria-selected={k.id === kind}>15            {k.label}16          </Link>17        ))}18      </div>19      <div className="flex flex-wrap items-center gap-1" role="radiogroup" aria-label="Window">20        {RANKING_WINDOWS.map((w) => (21          <Link key={w} href={href(kind, w)} className={cn('mono flex h-8 items-center px-2.5 text-xs', w === window ? 'bg-ink text-canvas' : 'border border-rule text-ink-2 hover:text-ink')} role="radio" aria-checked={w === window}>22            {w}23          </Link>24        ))}25      </div>26    </div>27  );28}2930export function RankingsTable({ data }: { data: Rankings }) {31  const k = RANKING_KINDS.find((x) => x.id === data.kind) ?? RANKING_KINDS[0]!;32  const formatValue = (c: { value?: number }) => (k.unit === 'pct' ? fmtPctSigned(c.value) : k.unit === 'count' ? fmtInt(c.value) : fmtScore(c.value));33  const formatDelta = (c: { delta?: number | null }) => (c.delta === null || c.delta === undefined ? null : k.unit === 'pct' ? fmtSigned(c.delta, 1) + ' pt' : fmtSigned(c.delta, 1));34  return <CompanyTable items={data.items} rank valueLabel={k.short} formatValue={formatValue} formatDelta={formatDelta} />;35}36