@thi.ng/rdom-components/tabs.js

Collection of unstyled, customizable components for @thi.ng/rdom

import { identity } from "@thi.ng/api/fn";
import { div } from "@thi.ng/hiccup-html/blocks";
import { section } from "@thi.ng/hiccup-html/sections";
import { $list } from "@thi.ng/rdom/list";
import { $switch } from "@thi.ng/rdom/switch";
import { dedupe } from "@thi.ng/transducers/dedupe";
import { map } from "@thi.ng/transducers/map";
import { range } from "@thi.ng/transducers/range";
const tabs = (src, opts) => {
  const { attribs = {}, head, sections } = opts;
  return div(
    attribs.wrapper,
    $list(
      src.map((id) => [
        ...map((i) => [i, i === id], range(sections.length))
      ]),
      "div",
      attribs.tab,
      ([i, sel]) => head(src, sections[i].title, i, sel)
    ),
    $switch(
      src.transform(dedupe()),
      identity,
      sections.reduce((acc, { content }, i) => {
        acc[i] = async (i2) => section(attribs.content, await content(i2));
        return acc;
      }, {})
    )
  );
};
export {
  tabs
};