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

src/clj/auto_ap/ssr/components/data_grid.clj

@@ -0,0 +1,34 @@
+(ns auto-ap.ssr.components.data-grid)
+
+(defn header- [params & rest]
+  (into [:th.px-4.py-3 {:scope "col" :class (:class params)} ] rest))
+
+
+(defn row- [params & rest]
+  (into [:tr {:class (cond-> "border-b dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700"
+                       
+                       (:class params) (str " " (:class params)))}] rest))
+
+(defn cell- [params & rest]
+  (into [:td.px-4.py-2 {:class (:class params)}] rest))
+
+(defn right-stack-cell- [params & rest]
+  (cell- params (into [:div.flex.flex-row-reverse.items-center.justify-between 
+                       rest]))
+  )
+
+(defn checkbox-header- [params & rest]
+  [:th {:scope "col", :class "p-4"}
+   [:div {:class "flex items-center"}
+    [:input {:id "checkbox-all", :type "checkbox", :class "w-4 h-4 bg-gray-100 border-gray-300 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"}]
+    [:label {:for "checkbox-all", :class "sr-only"} "checkbox"]]])
+
+(defn data-grid- [{:keys [headers]} & rest]
+  [:table {:class "w-full text-sm text-left text-gray-500 dark:text-gray-400"}
+   [:thead {:class "text-xs text-gray-800 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"}
+    (into 
+      [:tr]
+      headers)]
+   (into 
+     [:tbody]
+     rest)])