hamlab/web/src/KeyBar.tsx

import { useState } from 'react'

const KEYS: [string, string][] = [
  ['Esc', '\x1b'], ['Tab', '\t'], ['↑', '\x1b[A'], ['↓', '\x1b[B'], ['←', '\x1b[D'], ['→', '\x1b[C'],
  ['Home', '\x1b[H'], ['End', '\x1b[F'], ['|', '|'], ['~', '~'], ['-', '-'], ['/', '/'], ['^C', '\x03'], ['^D', '\x04'],
]

export default function KeyBar({ send, setCtrl }: { send: (s: string) => void; setCtrl: (v: boolean) => void }) {
  const [ctrl, setCtrlState] = useState(false)
  const toggle = () => { const v = !ctrl; setCtrlState(v); setCtrl(v) }
  const press = (s: string) => { send(s); if (ctrl) { setCtrlState(false); setCtrl(false) } }
  return (
    <div className="keybar" onMouseDown={(e) => e.preventDefault()}>
      <button className={ctrl ? 'on' : ''} onClick={toggle}>Ctrl</button>
      {KEYS.map(([label, seq]) => <button key={label} onClick={() => press(seq)}>{label}</button>)}
    </div>
  )
}