(defcomp
  ()
  (div
    (~tw :tokens "space-y-4")
    (div
      (~tw :tokens "p-4 rounded border border-stone-200 bg-stone-100")
      (p
        (~tw :tokens "text-sm text-stone-600 font-medium mb-2")
        "Keyboard shortcuts:")
      (div
        (~tw :tokens "flex gap-4")
        (div
          (~tw :tokens "flex items-center gap-1")
          (kbd
            (~tw :tokens "px-2 py-0.5 bg-stone-100 border border-stone-300 rounded text-xs font-mono")
            "s")
          (span (~tw :tokens "text-sm text-stone-500") "Search"))
        (div
          (~tw :tokens "flex items-center gap-1")
          (kbd
            (~tw :tokens "px-2 py-0.5 bg-stone-100 border border-stone-300 rounded text-xs font-mono")
            "n")
          (span (~tw :tokens "text-sm text-stone-500") "New item"))
        (div
          (~tw :tokens "flex items-center gap-1")
          (kbd
            (~tw :tokens "px-2 py-0.5 bg-stone-100 border border-stone-300 rounded text-xs font-mono")
            "h")
          (span (~tw :tokens "text-sm text-stone-500") "Help"))))
    (div
      :id "kbd-target"
      :sx-get "/sx/(geography.(hypermedia.(example.(api.keyboard))))?key=s"
      :sx-trigger "keyup[key=='s'&&!event.target.matches('input,textarea')] from:body"
      :sx-swap "innerHTML"
      (~tw :tokens "p-4 rounded border border-stone-200 bg-stone-100 text-center")
      (p (~tw :tokens "text-stone-400 text-sm") "Press a shortcut key..."))
    (div
      :sx-get "/sx/(geography.(hypermedia.(example.(api.keyboard))))?key=n"
      :sx-trigger "keyup[key=='n'&&!event.target.matches('input,textarea')] from:body"
      :sx-target "#kbd-target"
      :sx-swap "innerHTML")
    (div
      :sx-get "/sx/(geography.(hypermedia.(example.(api.keyboard))))?key=h"
      :sx-trigger "keyup[key=='h'&&!event.target.matches('input,textarea')] from:body"
      :sx-target "#kbd-target"
      :sx-swap "innerHTML")))