Makes a clean demo of using tailwind for the company 1099 page.

This commit is contained in:
2023-05-10 22:03:21 -07:00
parent 4b5227e8cb
commit 6220ae1f6d
14 changed files with 753 additions and 739 deletions

View File

@@ -0,0 +1,26 @@
(ns auto-ap.ssr.components.buttons
(:require [auto-ap.ssr.svg :as svg]))
(defn button-icon- [_ i]
[:div.h-4.w-4 i])
(defn button- [params & children]
[:button { :class (cond-> "text-white focus:ring-4 font-bold rounded-lg text-sm px-5 py-2.5 text-center mr-2 inline-flex items-center hover:scale-105 transition duration-100 justify-center"
(= :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 "))}
[: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 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)])