minusculas

components/tabs.js

@@ -0,0 +1,49 @@
+// components/Tabs.js
+import { Tag, For } from "sigpro";
+
+export const Tabs = (props, children) => {
+  children === undefined && (children = props, props = {});
+  return Tag("div", { ...props, class: `tabs ${props.class ?? ''}` }, children);
+};
+
+export const Tab = (props, children) => {
+  children === undefined && (children = props, props = {});
+  return Tag("a", { ...props, role: "tab", class: `tab ${props.class ?? ''}` }, children);
+};
+
+export const TabContent = (props, children) => {
+  children === undefined && (children = props, props = {});
+  return Tag("div", { ...props, class: `tab-content ${props.class ?? ''}` }, children);
+};
+
+export const TabClose = (props) => Tag("a", { ...props, role: "tab", class: `tab ${props.class ?? ''}` }, [
+  Tag("span", { class: "flex items-center" }, [
+    props.label,
+    Tag("span", {
+      class: "icon-[lucide--x] w-3.5 h-3.5 ml-2 cursor-pointer hover:opacity-70",
+      onclick: (e) => { e.stopPropagation(); props.onClose?.(e); }
+    })
+  ])
+]);
+
+export const TabItems = (props) => {
+  const items = typeof props.items === "function" ? props.items : () => props.items || [];
+  return For(
+    items,
+    (item, idx) => {
+      const TabComp = item.closable ? TabClose : Tab;
+      return [
+        TabComp({
+          ...item,
+          class: () => props.activeIndex() === idx ? `tab-active ${item.class ?? ''}` : item.class,
+          onclick: (e) => { e.preventDefault(); props.activeIndex(idx); item.onclick?.(e); },
+          onClose: () => props.onClose?.(idx, item)
+        }),
+        TabContent({
+          style: () => `display: ${props.activeIndex() === idx ? "block" : "none"};`
+        }, typeof item.content === "function" ? item.content() : item.content)
+      ];
+    },
+    (item, idx) => item.id ?? idx
+  );
+};