28 lines
1.2 KiB
Clojure
28 lines
1.2 KiB
Clojure
(ns auto-ap.ssr.components.tabs
|
|
(:require
|
|
[auto-ap.ssr.hx :as hx]))
|
|
|
|
(defn tabs- [{:keys [tabs active]}]
|
|
[:div.flex.flex-col.gap-2 {:x-data (hx/json {:activeTab active})}
|
|
[:div {:class "text-sm font-medium text-center text-gray-500 border-b border-gray-200 dark:text-gray-400 dark:border-gray-700" }
|
|
[:ul {:class "flex flex-wrap -mb-px"}
|
|
(for [tab tabs]
|
|
[:li {:class "me-2"}
|
|
[:a {:href "#"
|
|
:x-data (hx/json {:tabName (:name tab)})
|
|
":data-active" (format "activeTab==tabName")
|
|
"@click" (format "activeTab=tabName" )
|
|
:class "inline-block data-[active]:text-blue-600 data-[active]:border-blue-600 p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300"}
|
|
(:name tab)]])
|
|
|
|
|
|
|
|
#_[:li
|
|
[:a {:class "inline-block p-4 text-gray-400 rounded-t-lg cursor-not-allowed dark:text-gray-500"} "Disabled"]]]]
|
|
(for [tab tabs]
|
|
[:div {:x-data (hx/json {:tabName (:name tab)})
|
|
:x-show (format "activeTab==tabName")
|
|
"x-transition:enter" "transition-opacity duration-300"
|
|
"x-transition:enter-start" "opacity-0"
|
|
"x-transition:enter-end" "opacity-100"}
|
|
(:content tab) ])]) |