1
import { Icon } from '@/client/ui/icons.tsx';
2
import { anchors } from './diagram-model.ts';
3
import type { ExplanationTrigger } from './diagram-model.ts';
4
 
5
export function SfuNode({ expanded, onSelect }: ExplanationTrigger) {
6
  return (
7
    <section
8
      className="relative z-1 mt-8 mb-7 grid w-full justify-self-center pt-6 text-center lg:my-0 lg:mt-14 lg:block lg:w-[145px] lg:self-center lg:pt-0 xl:w-[158px]"
9
      aria-label="Cloudflare Realtime SFU relay"
10
    >
11
      <button
12
        data-anchor={anchors.sfuInput}
13
        className="relative flex w-full items-center justify-center gap-2 rounded-t-lg border border-cloud-line bg-cloud p-3 hover:bg-cloud-hover aria-expanded:bg-cloud-hover lg:flex-col lg:gap-0 lg:px-2 lg:pt-5 lg:pb-3 [&>strong]:text-base [&>strong]:font-medium [&>strong]:tracking-tight"
14
        onClick={(event) => onSelect(event.currentTarget)}
15
        aria-haspopup="dialog"
16
        aria-expanded={expanded}
17
        aria-controls={expanded ? 'signal-detail' : undefined}
18
      >
19
        <span className="text-cloud-ink lg:mb-1.5 [&_svg]:h-7 [&_svg]:w-8 lg:[&_svg]:h-9 lg:[&_svg]:w-11">
20
          <Icon name="cloud" />
21
        </span>
22
        <strong>Cloudflare</strong>
23
        <span className="text-[11px] text-muted">Realtime SFU</span>
24
        <span className="absolute right-2 top-1 text-sm text-muted" aria-hidden="true">
25
          ↗
26
        </span>
27
      </button>
28
      <div className="flex justify-around gap-2 rounded-b-lg border border-t-0 border-cloud-line bg-cloud-pale px-4 py-0.5 lg:block lg:px-0 lg:py-1">
29
        <span
30
          data-anchor={anchors.relay.audio}
31
          className="flex h-7 items-center justify-between gap-1.5 font-mono text-[8px] tracking-wide lg:-mx-1 [&_i]:size-1 [&_i]:rounded-full [&_i]:border [&_i]:border-current [&_i]:bg-surface lg:[&_i]:size-1.5 text-audio"
32
        >
33
          <i />
34
          AUDIO
35
          <i />
36
        </span>
37
        <span
38
          data-anchor={anchors.relay.spectrum}
39
          className="flex h-7 items-center justify-between gap-1.5 font-mono text-[8px] tracking-wide lg:-mx-1 [&_i]:size-1 [&_i]:rounded-full [&_i]:border [&_i]:border-current [&_i]:bg-surface lg:[&_i]:size-1.5 text-spectrum"
40
        >
41
          <i />
42
          SPECTRUM
43
          <i />
44
        </span>
45
        <span
46
          data-anchor={anchors.relay.robot}
47
          className="flex h-7 items-center justify-between gap-1.5 font-mono text-[8px] tracking-wide lg:-mx-1 [&_i]:size-1 [&_i]:rounded-full [&_i]:border [&_i]:border-current [&_i]:bg-surface lg:[&_i]:size-1.5 text-robot"
48
        >
49
          <i />
50
          ROBOT ⇄<i />
51
        </span>
52
      </div>
53
    </section>
54
  );
55
}