Adds advanced view

src/clj/auto_ap/ssr/components/tabs.clj

@@ -0,0 +1,28 @@
+(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) ])])