1
import { Icon } from './ui/icons.tsx';
2
import { Exhibit } from './exhibit/exhibit.tsx';
3
import { useRadio } from './radio/use-radio.ts';
4
 
5
export function App() {
6
  const { state, signal, actions, audioRef } = useRadio();
7
  return (
8
    <div className="mx-auto max-w-[1360px] px-4 pb-6 sm:px-6 lg:px-10 max-lg:max-w-[720px]">
9
      <a
10
        className="sr-only z-10 rounded bg-paper focus:not-sr-only focus:fixed focus:top-3 focus:left-5 focus:p-3"
11
        href="#exhibit"
12
      >
13
        Skip to the exhibit
14
      </a>
15
      <header className="flex items-center justify-between gap-3 border-b border-line py-5 sm:gap-5 sm:py-6">
16
        <a
17
          className="flex items-center gap-2 text-xs font-medium tracking-widest no-underline sm:gap-3 sm:text-sm"
18
          href="/"
19
          aria-label="Pocket Radio exhibit home"
20
        >
21
          <span
22
            className="size-9 rounded-lg bg-ink p-2 text-lime-100 [&_svg]:size-full"
23
            aria-hidden="true"
24
          >
25
            <Icon name="wave" />
26
          </span>
27
          <span>
28
            POCKET RADIO
29
            <span className="mt-1 block font-mono text-[7px] font-normal tracking-wide text-muted sm:text-[9px]">
30
              ESP32 × CLOUDFLARE
31
            </span>
32
          </span>
33
        </a>
34
        <div className="flex items-center gap-2 font-mono text-[8px] tracking-wide sm:text-[10px]">
35
          <span
36
            className={`status-dot inline-block size-1.5 shrink-0 rounded-full ${state.room.online ? 'bg-spectrum shadow-[0_0_0_4px_var(--color-core)]' : 'bg-muted'}`}
37
          />
38
          <span>
39
            {state.auth === 'required'
40
              ? 'PRIVATE ACCESS'
41
              : state.auth === 'checking'
42
                ? 'CHECKING THE BOARD'
43
                : state.room.online
44
                  ? 'BOARD IS ON AIR'
45
                  : 'BOARD IS OFFLINE'}
46
          </span>
47
        </div>
48
      </header>
49
      <main id="exhibit">
50
        <div className="flex items-end justify-between gap-5 py-7 sm:py-8">
51
          <h1 className="my-2 text-4xl font-medium leading-tight tracking-[-0.045em] sm:text-5xl">
52
            Follow the signal<span className="text-robot">.</span>
53
          </h1>
54
          <div className="hidden items-center gap-3.5 pb-1 text-muted lg:flex [&>span:last-child]:font-mono [&>span:last-child]:text-[9px] [&>span:last-child]:leading-relaxed">
55
            <span className="font-mono text-3xl text-ink">
56
              {state.room.viewers.toString().padStart(2, '0')}
57
            </span>
58
            <span>LISTENERS</span>
59
          </div>
60
        </div>
61
        <Exhibit state={state} signal={signal} actions={actions} />
62
      </main>
63
      <audio ref={audioRef} autoPlay playsInline />
64
    </div>
65
  );
66
}