spb/internetpressure

1import { Bar } from '@/components/ui/primitives';2import { fmt } from '@/lib/format';3import { COMPONENT_LABEL, COMPONENT_ORDER, pressureColor } from '@/lib/pressure';4import type { ComponentScores } from '@/lib/types';56/** Static component score grid for scope pages. `null` = not attributable for this scope (shown, never faked). */7export function ComponentGrid({ components }: { components: ComponentScores }) {8  const ids = COMPONENT_ORDER.filter((c) => c in components);9  return (10    <dl className="grid grid-cols-3 gap-px overflow-hidden rounded-[4px] border border-line bg-line sm:grid-cols-6">11      {ids.map((id) => {12        const v = components[id];13        return (14          <div key={id} className="bg-panel px-3 py-2.5">15            <dt className="label truncate">{COMPONENT_LABEL[id]}</dt>16            <dd className="num mt-0.5 text-[22px] leading-none" style={{ color: v == null ? 'var(--ink-3)' : pressureColor(v) }} title={v == null ? 'Not attributable for this scope' : undefined}>17              {v == null ? 'n/a' : fmt(v)}18            </dd>19            <Bar value={v} className="mt-2" />20          </div>21        );22      })}23    </dl>24  );25}26