(ns auto-ap.ssr.components.buttons (:require [auto-ap.ssr.svg :as svg])) (defn button-icon- [_ i] [:div.h-4.w-4 i]) (defn bg-colors [color disabled] (let [base-color (cond (= :primary color) "green" (= :secondary color) "blue" (nil? color) "white" :else color) disabled-weight (when disabled 400)] (format " bg-%s-%d hover:bg-%s-%d focus:ring-%s-%d dark:bg-%s-%d dark:hover:bg-%s-%d " base-color (or disabled-weight 500) base-color (or disabled-weight 600) base-color (or disabled-weight 200) base-color (or disabled-weight 600) base-color (or disabled-weight 700) ))) (defn dark-color-weight [disabled] (if disabled 400 600)) (defn hover-color-weight [disabled] (if disabled 400 600)) (for [color ["green" "blue" "white"] weight (range 100 900 100)] (str "bg-" color "-" weight)) ;;ensuring these colors show up ;; => ("bg-green-100" ;; "bg-green-200" ;; "bg-green-300" ;; "bg-green-400" ;; "bg-green-500" ;; "bg-green-600" ;; "bg-green-700" ;; "bg-green-800" ;; "bg-blue-100" ;; "bg-blue-200" ;; "bg-blue-300" ;; "bg-blue-400" ;; "bg-blue-500" ;; "bg-blue-600" ;; "bg-blue-700" ;; "bg-blue-800" ;; "bg-white-100" ;; "bg-white-200" ;; "bg-white-300" ;; "bg-white-400" ;; "bg-white-500" ;; "bg-white-600" ;; "bg-white-700" ;; "bg-white-800") (defn button- [params & children] [:button (update params :class #(cond-> % true (str " focus:ring-4 font-bold rounded-lg text-xs p-3 text-center mr-2 inline-flex items-center justify-center" (bg-colors (:color params) (:disabled params))) (not (:disabled params)) (str " hover:scale-105 transition duration-100") (:disabled params) (str " cursor-not-allowed") (not (nil? (:color params))) (str " text-white ") (nil? (:color params)) (str " bg-white dark:bg-gray-600 border-gray-300 dark:border-gray-700 text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-100 font-medium border border-gray-300 dark:border-gray-700"))) [:div.htmx-indicator.flex.items-center (svg/spinner {:class "inline w-4 h-4 text-white"}) [:div.ml-3 "Loading..."]] (into [:div.htmx-indicator-hidden.inline-flex.gap-2.items-center.justify-center] children)]) (defn a-button- [params & children] [:a (-> params (update :class #(cond-> % true (str " focus:ring-4 font-bold rounded-lg text-xs p-3 text-center mr-2 inline-flex items-center hover:scale-105 transition duration-100 justify-center") (= :secondary (:color params)) (str " text-white bg-blue-500 hover:bg-blue-600 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700") (= :primary (:color params)) (str " text-white bg-green-500 hover:bg-green-600 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 ") (nil? (:color params)) (str " bg-white dark:bg-gray-600 border-gray-300 dark:border-gray-700 text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-100 font-medium border border-gray-300 dark:border-gray-700") )) (assoc :tabindex 0) (assoc :href (:href params "#"))) [:div.htmx-indicator.flex.items-center (svg/spinner {:class "inline w-4 h-4 text-white"}) [:div.ml-3 "Loading..."]] (into [:div.htmx-indicator-hidden.inline-flex.gap-2.items-center.justify-center] children)]) (defn icon-button- [params & children] (into [:button (update params :class #(cond-> % true (str " inline-flex items-center justify-center items-center p-3 text-sm font-medium border border-gray-300 dark:border-gray-700 text-center rounded-lg ") (= :secondary (:color params)) (str " bg-blue-500 hover:bg-blue-600 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700") (= :primary (:color params)) (str " bg-green-500 hover:bg-green-600 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 ") (= :primary-light (:color params)) (str " bg-green-200 hover:bg-green-300 focus:ring-green-200 dark:bg-green-700 dark:hover:bg-green-600 text-gray-800 dark:text-gray-200") (= :secondary-light (:color params)) (str " bg-blue-200 hover:bg-blue-300 focus:ring-blue-200 dark:bg-blue-700 dark:hover:bg-blue-600 text-gray-800 dark:text-gray-200") (= :danger-light (:color params)) (str " bg-red-200 hover:bg-red-300 focus:ring-red-200 dark:bg-red-700 dark:hover:bg-red-600 text-gray-800 dark:text-gray-200") (nil? (:color params)) (str " bg-white dark:bg-gray-600 border-gray-300 dark:border-gray-700 text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-100"))) [:div.htmx-indicator.flex.items-center (svg/spinner {:class "inline w-4 h-4 text-white"})] [:div.htmx-indicator-hidden.inline-flex.gap-2.items-center.justify-center (into [:div.h-4.w-4] children)]])) (defn a-icon-button- [params & children] (into [:a (update params :class str " inline-flex items-center justify-center bg-white dark:bg-gray-600 items-center p-3 text-sm font-medium border border-gray-300 dark:border-gray-700 text-center text-gray-500 hover:text-gray-800 rounded-lg dark:text-gray-400 dark:hover:text-gray-100") [:div.h-4.w-4 children]])) (defn save-button- [params & children] [:button { :class "text-white bg-green-500 hover:bg-green-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800 inline-flex items-center hover:scale-105 transition duration-300"} [:div.htmx-indicator.flex.items-center (svg/spinner {:class "inline w-4 h-4 text-white"}) [:div.ml-3 "Loading..."]] (into [:div.htmx-indicator-hidden ] children)]) (defn group-button- [{:keys [size] :or {size :normal} :as params} & children] (into [:button (cond-> params true (assoc :type (or (:type params) "button")) true (update :class (fn [c] (cond-> c true (str " font-medium text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-2 focus:ring-green-700 focus:text-green-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-green-500 dark:focus:text-white") (= :small size) (str " text-xs px-3 py-2") (= :normal size) (str " text-sm px-4 py-2") ) )) true (dissoc :size))] children )) (defn group- [{:keys [name]} & children] (let [children (-> children vec (update-in [0 1 :class] str " rounded-l-lg") (update-in [(dec (count children)) 1 :class] str " rounded-r-lg"))] (into [:div {:class "inline-flex rounded-md shadow-sm", :role "group" :hx-on:click "this.querySelector(\"input\").value = event.target.value; this.querySelector(\"input\").dispatchEvent(new Event('change', {bubbles: true}));"} [:input {:type "hidden" :name name}]] children)))