ihk24/gfi-ihk-2024/stories/atoms/tabs/TabsComponent.js

import './tabs.scss';
import {createElement} from "../../_global/scripts/helpers";
import {createButton} from "../button/ButtonComponent";

export const createTabs = ({
  size = 'small',
  color = 'primary-extra-light',
  data = [
    {
      label: 'Alle <strong>(24)</strong>',
      link: '#',
    },
    {
      label: 'Veranstaltungen <strong>(4)</strong>',
      link: '#',
    },
    {
      label: 'Downloads <strong>(12)</strong>',
      link: '#',
    }
  ]
}) => {
  const tabs = createElement('div', ['tabs']);
  data.map((item, i) => {
    const button = createButton({
      size: size,
      label: item.label,
      link: item.link,
      color: color,
    })
    tabs.appendChild(button);
    if (i === 0) {
      button.classList.add('active');
    }
  })

  return tabs;
}