1
import type { SignalBuffer } from '@/client/radio/session-state.ts';
2
import { BranchPanel } from '@/client/exhibit/branch-panel.tsx';
3
import type { ExplanationTrigger } from '@/client/exhibit/diagram/diagram-model.ts';
4
import { SpectrumCanvas } from './spectrum-canvas.tsx';
5
 
6
export function SpectrumPanel({
7
  signal,
8
  live,
9
  paused,
10
  ...explanation
11
}: ExplanationTrigger & { signal: SignalBuffer; live: boolean; paused: boolean }) {
12
  return (
13
    <BranchPanel
14
      branch="spectrum"
15
      label="Spectrum stream"
16
      title="See the music."
17
      caption="LIVE FFT · DATA CHANNEL"
18
      live={live}
19
      {...explanation}
20
    >
21
      <div className="min-w-0">
22
        <SpectrumCanvas signal={signal} />
23
        <div
24
          className="mt-1 flex justify-between font-mono text-[9px] text-muted"
25
          aria-hidden="true"
26
        >
27
          <span>30 Hz</span>
28
          <span>100</span>
29
          <span>1k</span>
30
          <span>5k</span>
31
          <span>20k</span>
32
        </div>
33
      </div>
34
      <div className="mt-3 flex flex-wrap justify-between gap-x-2 gap-y-1 font-mono text-[8px] tracking-wide text-spectrum">
35
        <span>{paused ? 'PAUSED' : '32 BANDS · 25 UPDATES / SEC'}</span>
36
      </div>
37
    </BranchPanel>
38
  );
39
}