;; Side-by-side htmx ↔ hyperscript translation display
(defcomp
  (&key htmx-html hs-source description)
  (div
    (~tw :tokens "border border-gray-200 rounded-lg overflow-hidden mb-6")
    (when
      description
      (div
        (~tw :tokens "px-4 py-2 bg-gray-50 border-b border-gray-200")
        (p (~tw :tokens "text-sm font-medium text-gray-700") description)))
    (div
      (~tw :tokens "grid grid-cols-2 divide-x divide-gray-200")
      (div
        (~tw :tokens "p-4")
        (h4
          (~tw
            :tokens "text-xs font-semibold uppercase tracking-wide text-gray-400 mb-2")
          "htmx")
        (pre
          (~tw
            :tokens "bg-stone-100 text-gray-900 p-3 rounded text-sm font-mono overflow-x-auto whitespace-pre")
          htmx-html))
      (div
        (~tw :tokens "p-4")
        (h4
          (~tw
            :tokens "text-xs font-semibold uppercase tracking-wide text-violet-400 mb-2")
          "_hyperscript")
        (pre
          (~tw
            :tokens "bg-stone-100 text-gray-900 p-3 rounded text-sm font-mono overflow-x-auto whitespace-pre")
          hs-source)))))