@pagamio/frontend-commons-lib
Version:
Pagamio library for Frontend reusable components like the form engine and table container
38 lines (37 loc) • 2.52 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Tabs } from 'flowbite-react';
import { useState } from 'react';
const ContainedTab = ({ tabs, activeTab: controlledActiveTab, onTabChange, tabClassName = '', title, description, isSticky = false, isFullWidth = true, }) => {
const [internalActiveTab, setInternalActiveTab] = useState(tabs[0]?.id || 0);
const isControlled = typeof controlledActiveTab !== 'undefined';
const activeTab = isControlled ? controlledActiveTab : internalActiveTab;
const handleTabClick = (tabId) => {
if (!isControlled) {
setInternalActiveTab(tabId);
}
onTabChange?.(tabId);
};
return (_jsxs("div", { className: "w-full", children: [_jsxs("div", { children: [title && _jsx("h2", { className: "text-lg font-semibold", children: title }), description && _jsx("p", { className: "text-sm text-gray-500", children: description })] }), _jsx(Tabs, { "aria-label": "Tabs", className: "flex-nowrap", style: {
display: 'flex',
flexDirection: 'row',
}, theme: {
base: 'flex flex-col gap-2',
tablist: {
base: `${isSticky ? 'sticky top-0 z-10 bg-white' : ''} flex text-center p-[5px] rounded-lg border-b border-gray-200 dark:border-gray-700 bg-gray-200 ${isFullWidth ? 'w-full' : 'w-fit'} ${tabClassName}`,
tabitem: {
base: 'flex items-center justify-center p-2 flex-1 rounded-lg text-sm font-medium first:ml-0 disabled:cursor-not-allowed disabled:text-gray-400 focus:outline-none',
variant: {
default: {
base: 'rounded-t-lg',
active: {
on: 'text-black bg-white active dark:text-cyan-500 dark:border-cyan-500',
off: 'border-b-2 border-transparent text-gray-500 dark:text-gray-400 dark:hover:text-gray-300',
},
},
},
},
},
tabpanel: 'p-0',
}, onActiveTabChange: (tab) => handleTabClick(tab), children: tabs.map((tab) => (_jsx(Tabs.Item, { title: tab.title, active: activeTab === tab.id, children: tab.content }, tab.id))) })] }));
};
export default ContainedTab;