Makes a clean demo of using tailwind for the company 1099 page.
This commit is contained in:
67
src/clj/auto_ap/ssr/components.clj
Normal file
67
src/clj/auto_ap/ssr/components.clj
Normal file
@@ -0,0 +1,67 @@
|
||||
(ns auto-ap.ssr.components
|
||||
(:require [auto-ap.ssr.components.breadcrumbs :as breadcrumbs]
|
||||
[auto-ap.ssr.components.buttons :as buttons]
|
||||
[auto-ap.ssr.components.dialog :as dialog]
|
||||
[auto-ap.ssr.components.inputs :as inputs]
|
||||
[auto-ap.ssr.components.aside :as aside]
|
||||
[auto-ap.ssr.components.card :as card]
|
||||
[auto-ap.ssr.components.navbar :as navbar]
|
||||
[auto-ap.ssr.components.page :as page]
|
||||
[auto-ap.ssr.components.data-grid :as data-grid]))
|
||||
|
||||
|
||||
(def breadcrumbs breadcrumbs/breadcrumbs-)
|
||||
(def button buttons/button-)
|
||||
(def button-icon buttons/button-icon-)
|
||||
(def icon-button buttons/icon-button-)
|
||||
(def dialog dialog/dialog-)
|
||||
|
||||
(def text-input inputs/text-input-)
|
||||
(def select inputs/select-)
|
||||
(def field inputs/field-)
|
||||
|
||||
(def left-aside aside/left-aside-)
|
||||
(def company-aside-nav aside/company-aside-nav-)
|
||||
(def content-card card/content-card-)
|
||||
|
||||
(def navbar navbar/navbar-)
|
||||
|
||||
(def page page/page-)
|
||||
|
||||
(def data-grid data-grid/data-grid-)
|
||||
(def data-grid-header data-grid/header-)
|
||||
(def data-grid-row data-grid/row-)
|
||||
(def data-grid-cell data-grid/cell-)
|
||||
(def data-grid-right-stack-cell data-grid/right-stack-cell-)
|
||||
|
||||
(defn link [{:keys [class href]} & children]
|
||||
(into [:a {:href href
|
||||
:class (str "font-medium text-blue-600 dark:text-blue-500 hover:underline " class)}]
|
||||
children))
|
||||
|
||||
(defn paginator []
|
||||
[:nav {:class "flex flex-col items-start justify-between p-4 space-y-3 md:flex-row md:items-center md:space-y-0", :aria-label "Table navigation"}
|
||||
[:span {:class "text-sm font-normal text-gray-500 dark:text-gray-400"}
|
||||
[:span {:class "font-semibold text-gray-900 dark:text-white"} "1-10"]
|
||||
[:span {:class "font-semibold text-gray-900 dark:text-white"} "1000"]]
|
||||
[:ul {:class "inline-flex items-stretch -space-x-px"}
|
||||
[:li
|
||||
[:a {:href "#", :class "flex items-center justify-center h-full py-1.5 px-3 ml-0 text-gray-500 bg-white rounded-l-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"}
|
||||
[:span {:class "sr-only"} "Previous"]
|
||||
[:svg {:class "w-5 h-5", :aria-hidden "true", :fill "currentColor", :viewbox "0 0 20 20", :xmlns "http://www.w3.org/2000/svg"}
|
||||
[:path {:fill-rule "evenodd", :d "M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z", :clip-rule "evenodd"}]]]]
|
||||
[:li
|
||||
[:a {:href "#", :class "flex items-center justify-center px-3 py-2 text-sm leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"} "1"]]
|
||||
[:li
|
||||
[:a {:href "#", :class "flex items-center justify-center px-3 py-2 text-sm leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"} "2"]]
|
||||
[:li
|
||||
[:a {:href "#", :aria-current "page", :class "z-10 flex items-center justify-center px-3 py-2 text-sm leading-tight border text-primary-600 bg-primary-50 border-primary-300 hover:bg-primary-100 hover:text-primary-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white"} "3"]]
|
||||
[:li
|
||||
[:a {:href "#", :class "flex items-center justify-center px-3 py-2 text-sm leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"} "..."]]
|
||||
[:li
|
||||
[:a {:href "#", :class "flex items-center justify-center px-3 py-2 text-sm leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"} "100"]]
|
||||
[:li
|
||||
[:a {:href "#", :class "flex items-center justify-center h-full py-1.5 px-3 leading-tight text-gray-500 bg-white rounded-r-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"}
|
||||
[:span {:class "sr-only"} "Next"]
|
||||
[:svg {:class "w-5 h-5", :aria-hidden "true", :fill "currentColor", :viewbox "0 0 20 20", :xmlns "http://www.w3.org/2000/svg"}
|
||||
[:path {:fill-rule "evenodd", :d "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", :clip-rule "evenodd"}]]]]]])
|
||||
Reference in New Issue
Block a user