sigpro-ui/components/Tabs.js

// 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
  );
};