Implement Tabs component with dynamic content

src/components/Tabs.js

@@ -0,0 +1,46 @@
+import { $html, $for } from "sigpro";
+import { val, joinClass } from "../core/utils.js";
+
+/** TABS */
+export const Tabs = (props) => {
+  const { items, ...rest } = props;
+  const itemsSignal = typeof items === "function" ? items : () => items || [];
+
+  return $html("div", { ...rest, class: "flex flex-col gap-4 w-full" }, [
+    $html(
+      "div",
+      {
+        role: "tablist",
+        class: joinClass("tabs tabs-box", props.class),
+      },
+      $for(
+        itemsSignal,
+        (it) =>
+          $html(
+            "a",
+            {
+              role: "tab",
+              class: () => joinClass(
+                "tab", 
+                val(it.active) && "tab-active", 
+                val(it.disabled) && "tab-disabled", 
+                it.tip && "tooltip"
+              ),
+              "data-tip": it.tip,
+              onclick: (e) => !val(it.disabled) && it.onclick?.(e),
+            },
+            it.label,
+          ),
+        (t) => t.label,
+      ),
+    ),
+    () => {
+      const active = itemsSignal().find((it) => val(it.active));
+      if (!active) return null;
+      const content = val(active.content);
+      return $html("div", { class: "p-4" }, [
+        typeof content === "function" ? content() : content
+      ]);
+    },
+  ]);
+};