(defcomp
  ()
  (~docs/page
    :title "Dynamic Class and Style"
    (p
      "React uses "
      (code "className")
      " and "
      (code "style")
      " props with state. SX does the same — "
      (code "(deref signal)")
      " inside a "
      (code ":class")
      " or "
      (code ":style")
      " attribute creates a reactive binding. The attribute updates when the signal changes.")
    (~reactive-islands/index/demo-dynamic-class)
    (~docs/code
      :src (highlight
        (component-source "~reactive-islands/index/demo-dynamic-class")
        "lisp"))
    (p
      "React equivalent: "
      (code "className={danger ? 'red' : 'green'}")
      " and "
      (code "style={{fontSize: size}}")
      ". In SX the "
      (code "str")
      " + "
      (code "if")
      " + "
      (code "deref")
      " pattern handles it — no "
      (code "classnames")
      " library needed. For complex conditional classes, use a "
      (code "computed")
      " or a CSSX "
      (code "defcomp")
      " that returns a class string.")))
