(defisland
  ()
  (let
    ((celsius (signal 20))
      (fahrenheit (computed (fn () (+ (* (deref celsius) 1.8) 32)))))
    (div
      (~tw :tokens "rounded border border-violet-200 bg-violet-50 p-4 my-4")
      (div
        (~tw :tokens "flex items-center gap-3")
        (div
          (~tw :tokens "flex items-center gap-2")
          (button
            (~tw :tokens "px-2 py-1 rounded bg-stone-200 text-stone-700 text-sm hover:bg-stone-300")
            :on-click (fn (e) (swap! celsius (fn (c) (- c 5))))
            "−5")
          (span
            (~tw :tokens "font-mono text-lg font-bold text-violet-900 w-16 text-center")
            (deref celsius))
          (button
            (~tw :tokens "px-2 py-1 rounded bg-stone-200 text-stone-700 text-sm hover:bg-stone-300")
            :on-click (fn (e) (swap! celsius (fn (c) (+ c 5))))
            "+5")
          (span (~tw :tokens "text-stone-500") "°C"))
        (span (~tw :tokens "text-stone-400") "=")
        (span
          (~tw :tokens "font-mono text-lg font-bold text-violet-900")
          (deref fahrenheit))
        (span (~tw :tokens "text-stone-500") "°F")))))
