spb/internetpressure

1import type { ReactNode } from 'react';2import { ConfBar, Delta, LevelBadge } from '@/components/ui/primitives';3import { fmt } from '@/lib/format';4import { pressureColor } from '@/lib/pressure';5import { Time } from '@/lib/time';6import type { LevelId, Trend } from '@/lib/types';78/** Header for a scope page (region, country, ASN, service): kicker, title, big pressure, level, Δ1h, meta. */9export function ScopeHeader({ kicker, title, subtitle, pressure, level, delta1h, trend, confidence, ts, meta, right }: { kicker: ReactNode; title: string; subtitle?: ReactNode; pressure: number | null; level?: LevelId; delta1h?: number | null; trend?: Trend; confidence?: number | null; ts?: string | null; meta?: ReactNode; right?: ReactNode }) {10  return (11    <header className="grid gap-6 pt-6 pb-5 md:grid-cols-[minmax(0,1fr)_auto] md:items-end">12      <div className="min-w-0">13        <p className="label">{kicker}</p>14        <h1 className="mt-1 text-[26px] font-medium leading-tight tracking-tight text-ink sm:text-[32px]">{title}</h1>15        {subtitle && <p className="mt-1 text-[13px] text-ink-2">{subtitle}</p>}16        {meta && <div className="num mt-3 flex flex-wrap gap-x-5 gap-y-1 text-[12px] text-ink-2">{meta}</div>}17      </div>18      <div className="flex flex-wrap items-end gap-x-6 gap-y-2 md:justify-end">19        <div>20          <div className="label">pressure</div>21          <div className="num text-[64px] leading-none tracking-[-0.03em]" style={{ color: pressure == null ? 'var(--ink-3)' : pressureColor(pressure) }}>22            {fmt(pressure)}23          </div>24        </div>25        <div className="flex flex-col gap-1 pb-1">26          {level && <LevelBadge level={level} size="md" />}27          {delta1h !== undefined && (28            <span className="text-[15px]">29              <Delta value={delta1h} trend={trend} suffix="/ 1h" />30            </span>31          )}32          {confidence != null && <ConfBar value={confidence} />}33          {ts && (34            <span className="num text-[10.5px] text-ink-3">35              engine <Time ts={ts} style="time" />36            </span>37          )}38        </div>39        {right}40      </div>41    </header>42  );43}44