@react95/core/esm/Tabs/Tabs.mjs

Windows 95 styleguide

import React, { forwardRef, Children, useState } from "react";
import cn from "classnames";
import { Tab } from "./Tab.mjs";
import { navbar, navContainer } from "./Tabs.css.mjs";
import { Frame } from "../Frame/Frame.mjs";
const Tabs = forwardRef(
  ({ children, defaultActiveTab, onChange, ...rest }, ref) => {
    const [firstTab] = Children.toArray(children);
    const [activeTab, setActiveTab] = useState(
      defaultActiveTab || firstTab.props.title
    );
    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
      Frame,
      {
        ...rest,
        className: cn(navbar, rest.className),
        as: "ol",
        ref
      },
      Children.map(children, (child) => {
        const { title, disabled } = child.props;
        return /* @__PURE__ */ React.createElement(
          Tab,
          {
            key: title,
            ...child.props,
            activeTab,
            onClick: (e) => {
              if (!disabled) {
                if (onChange) {
                  onChange(title, e);
                }
                setActiveTab(title);
              }
            }
          }
        );
      })
    ), /* @__PURE__ */ React.createElement(Frame, { className: navContainer, width: rest.width || rest.w }, Children.map(
      children,
      (child) => child.props.title === activeTab && child.props.children
    )));
  }
);
export {
  Tabs
};