@smitch/fluid
Version:
A Next/React ui-component libray.
18 lines (17 loc) • 1.31 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;