spb/internetpressure

1'use client';23import { AnimatedNumber } from '@/components/ui/AnimatedNumber';4import { fmt, fmtInt, fmtRatio } from '@/lib/format';5import { useLive } from '@/lib/live';6import { Time } from '@/lib/time';7import type { BgpStats } from '@/lib/types';89export function BgpLive({ initial }: { initial: BgpStats }) {10  const live = useLive((s) => s.bgp);11  const updates = useLive((s) => s.updates);12  const cur = live ?? initial;13  const ratioColor = (r: number) => (r >= 3 ? 'var(--p-high)' : r >= 1.5 ? 'var(--p-elevated)' : 'var(--ink)');14  return (15    <div>16      <dl className="grid grid-cols-2 gap-px overflow-hidden rounded-[4px] border border-line bg-line sm:grid-cols-3 lg:grid-cols-6">17        {[18          ['updates / s', cur.updates_per_s, 1, undefined],19          ['announcements / s', cur.announcements_per_s, 1, `baseline ${fmt(initial.baseline.announcements_per_s, 0)}`],20          ['withdrawals / s', cur.withdrawals_per_s, 1, `baseline ${fmt(initial.baseline.withdrawals_per_s, 1)}`],21          ['unique prefixes / min', initial.unique_prefixes_1m, 0, undefined],22          ['unique origins / min', initial.unique_origins_1m, 0, undefined],23          ['origin changes / min', initial.origin_changes_1m, 0, undefined],24        ].map(([label, v, d, sub]) => (25          <div key={label as string} className="bg-panel px-3 py-2.5">26            <dt className="label truncate">{label as string}</dt>27            <dd className="num mt-0.5 text-[22px] leading-none text-ink">28              <AnimatedNumber value={v as number} digits={d as number} duration={updates ? 500 : 0} />29            </dd>30            {sub ? <dd className="num mt-0.5 text-[10.5px] text-ink-3">{sub as string}</dd> : null}31          </div>32        ))}33      </dl>34      <div className="mt-3 flex flex-wrap items-center gap-x-6 gap-y-1 text-[12.5px] text-ink-2">35        <span>36          announcements vs baseline <span className="num" style={{ color: ratioColor(cur.ratio.announcements) }}>{fmtRatio(cur.ratio.announcements)}</span>37        </span>38        <span>39          withdrawals vs baseline <span className="num" style={{ color: ratioColor(cur.ratio.withdrawals) }}>{fmtRatio(cur.ratio.withdrawals)}</span>40        </span>41        <span className={cur.fresh ? 'text-ok' : 'text-warn'}>{cur.fresh ? 'feed fresh' : 'feed stale — routing component frozen'}</span>42        <span className="num text-ink-3">43          {fmtInt(initial.peers)} peers · <Time ts={cur.ts} style="time" />44        </span>45      </div>46    </div>47  );48}49