@smitch/fluid
Version:
A lightweight, Tailwind-powered React/Next.js UI component library.
18 lines • 1.34 kB
JavaScript
"use client";
import { jsx as _jsx } from "react/jsx-runtime";
import { useMemo } from "react";
import { Tab } from "./Tab";
import { Spinner } from "..";
var tabsPositionStyles = {
left: "justify-start",
center: "justify-center",
right: "justify-end",
full: "justify-stretch",
};
var TabBar = function (_a) {
var tabs = _a.tabs, onClick = _a.onClick, activeId = _a.activeId, _b = _a.tabStyles, tabStyles = _b === void 0 ? "" : _b, _c = _a.activeTabStyles, activeTabStyles = _c === void 0 ? "" : _c, _d = _a.tabsPosition, tabsPosition = _d === void 0 ? "center" : _d;
var positionClasses = useMemo(function () { return tabsPositionStyles[tabsPosition]; }, [tabsPosition]);
return (_jsx("nav", { className: "tabbar", children: tabs ? (_jsx("ul", { className: "tablist flex -mb-[1px] ".concat(positionClasses), children: tabs.map(function (tab) { return (_jsx("li", { className: "".concat(tabsPosition === "full" ? "flex-grow" : ""), children: _jsx(Tab, { id: tab.id, title: tab.title, activeId: activeId, tabStyles: tabStyles, activeTabStyles: activeTabStyles, onClick: onClick }) }, tab.id)); }) })) : (_jsx("div", { className: "mb-4 w-full flex justify-center text-info", children: _jsx("div", { className: "w-12", children: _jsx(Spinner, {}) }) })) }));
};
export default TabBar;
//# sourceMappingURL=TabBar.js.map