(require '[reagent.core :as reagent])

(def color
  (reagent/atom "black"))

(def styles
  {:inputs {:padding "15px"}
   :inputs-label {:margin-left "5px"}
   :text {:fontSize "20px"}})

(defn color-item [n]
  [:label {:style (:inputs styles)}
   [:input {:type "radio" :name "color" :onClick #(reset! color n)}]
   [:span {:style (:inputs-label styles)} n]])

(defn color-picker []
  [:div
   [color-item "Chocolate"]
   [color-item "CornflowerBlue"]
   [color-item "LightSeaGreen"]])

(defn color-example []
  [:div
   [color-picker]
   [:p {:style (assoc (:text styles) :color @color)}
    "My color is dynamic, change it !"]])

(reagent/render [color-example] js/klipse-container)