spb/internetpressure

1'use client';23import Link from 'next/link';4import { Bar, Delta, LevelBadge, PNum } from '@/components/ui/primitives';5import { fmt, fmtInt } from '@/lib/format';6import { useLive } from '@/lib/live';7import { pressureColor } from '@/lib/pressure';8import type { ComponentId, Region } from '@/lib/types';910const COLS: ComponentId[] = ['routing', 'latency', 'dns', 'availability', 'http_tls', 'path'];11const SHORT: Record<string, string> = { routing: 'Rout', latency: 'Lat', dns: 'DNS', availability: 'Avail', http_tls: 'HTTP', path: 'Path' };1213export function RegionsTable({ initial }: { initial: Region[] | null }) {14  const live = useLive((s) => s.regions);15  const regions = [...(live ?? initial ?? [])].sort((a, b) => b.pressure - a.pressure);16  if (!regions.length) return <p className="text-xs text-ink-3">Regions unavailable.</p>;17  return (18    <div className="scroll-x -mx-3 px-3">19      <table className="tbl">20        <thead>21          <tr>22            <th>Region</th>23            <th className="r">Pressure</th>24            <th className="hidden w-[12%] md:table-cell"></th>25            <th className="r">Δ1h</th>26            <th className="hidden lg:table-cell">Level</th>27            {COLS.map((c) => (28              <th key={c} className="r hidden md:table-cell">29                {SHORT[c]}30              </th>31            ))}32            <th className="r hidden sm:table-cell">Probes</th>33            <th className="r hidden sm:table-cell">Targets</th>34            <th className="r hidden lg:table-cell">Inc.</th>35            <th className="hidden lg:table-cell">Coverage</th>36          </tr>37        </thead>38        <tbody>39          {regions.map((r) => (40            <tr key={r.id}>41              <td>42                <Link href={`/internet/${r.id}`} className="text-ink hover:text-accent">43                  {r.name}44                </Link>45                <span className="ml-2 hidden text-[10.5px] text-ink-3 xl:inline">{r.continent}</span>46              </td>47              <td className="r">48                <PNum value={r.pressure} className="text-[15px]" />49              </td>50              <td className="hidden md:table-cell">51                <Bar value={r.pressure} />52              </td>53              <td className="r">54                <Delta value={r.delta_1h} trend={r.trend} />55              </td>56              <td className="hidden lg:table-cell">57                <LevelBadge level={r.level} size="xs" />58              </td>59              {COLS.map((c) => {60                const v = r.components[c];61                return (62                  <td key={c} className="num r hidden md:table-cell" style={{ color: v == null ? 'var(--ink-3)' : pressureColor(v) }} title={v == null ? 'No ASN attribution for this region' : undefined}>63                    {v == null ? '·' : fmt(v, 0)}64                  </td>65                );66              })}67              <td className="num r hidden text-ink-2 sm:table-cell">{fmtInt(r.probes)}</td>68              <td className="num r hidden text-ink-2 sm:table-cell">{fmtInt(r.targets)}</td>69              <td className="num r hidden sm:table-cell lg:table-cell" style={{ color: r.incidents ? 'var(--p-high)' : 'var(--ink-3)' }}>70                {fmtInt(r.incidents)}71              </td>72              <td className="hidden text-[11px] lg:table-cell" style={{ color: r.coverage_ok ? 'var(--ink-2)' : 'var(--warn)' }}>73                {r.coverage_ok ? r.role : 'weak'} · {Math.round(r.confidence * 100)} %74              </td>75            </tr>76          ))}77        </tbody>78      </table>79    </div>80  );81}82