This is a tabs component:
```
import { useStore } from "modules/store";
import { ReactNode } from "react";
import { useFela } from "react-fela";
import { UI } from ".";
import { State } from "@hookstate/core";
import { AiOutlineClose } from "react-icons/ai";

type Props = {
  tabs: State<
    {
      label: JSX.Element | string;
      children: JSX.Element;
      key: string;
      closable?: boolean;
      disabled?: boolean;
    }[]
  >;
  color?: "primary" | "secondary" | "alternative";
  className?: string;
  horizontal?: boolean;
  model: State<string>;
  width?: number | string;
  height?: number | string;
  size?: number | string;
};
const Tabs = (props: Props) => {
  const store = useStore();
  const theme = store.theme.get({ noproxy: true });
  const { css } = useFela();
  const activeTab = props.model.get();
  const tabs = props.tabs.get({ noproxy: true });
  const onChange = (key: string) => {
    props.model.set(key);
  };
  const onClose = (key: string) => {
    const index = tabs.findIndex((NAME_1) => NAME_1.key === key);
    if (index !== -1) {
      props.tabs.set((o) => {
        o.splice(index, 1);
        if (key === activeTab) {
          if (o.length > 0) {
            const newIndex = Math.min(index, o.length - 1);
            props.model.set(o[newIndex].key);
          } else {
            props.model.set("");
          }
        }
        return o;
      });
    }
  };

  return (
    <UI.element
      tagName="div"
      className={[
        css(
          theme.tabs({
            color: props.color || "primary",
            width: props.width || "initial",
            height: props.height || "initial",
            horizontal: props.horizontal || false,
            size: props.size || 40,
          })
        ),
        props.className,
      ].join(" ")}
    >
      <UI.element tagName="ul">
        {tabs.map((NAME_1, index) => {
          const active = activeTab === NAME_1.key;
          return (
            <UI.element
              key={index}
              tagName="li"
              className={css(
                theme.NAME_1({
                  active,
                  disabled: NAME_1.disabled || false,
                  horizontal: props.horizontal || false,
                })
              )}
              onClick={() => onChange(NAME_1.key)}
            >
              {NAME_1.label}
              {NAME_1.closable && (
                <UI.button onClick={() => onClose(NAME_1.key)} variant="flat">
                  <AiOutlineClose size={13} />
                </UI.button>
              )}
            </UI.el