@pagamio/frontend-commons-lib
Version:
Pagamio library for Frontend reusable components like the form engine and table container
14 lines (13 loc) • 975 B
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
const Tab = ({ tabs, className, defaultTab = 0, onTabChange }) => {
const [activeTab, setActiveTab] = useState(defaultTab);
const handleTabClick = (index) => {
setActiveTab(index);
onTabChange?.(index);
};
return (_jsxs("div", { children: [_jsx("ul", { className: `flex border-b ${className}`, children: tabs.map((tab, index) => (_jsx("li", { className: `mr-2 ${activeTab === index
? 'border-b-2 border-primary-500 text-gray-900'
: 'border-transparent text-gray-600 hover:bg-gray-100'}`, children: _jsx("button", { onClick: () => handleTabClick(index), className: `block px-4 py-2 text-sm focus:outline-none ${activeTab === index ? 'font-semibold' : ''}`, children: tab.title }) }, tab.id))) }), _jsx("div", { className: "mt-4", children: tabs[activeTab]?.content })] }));
};
export default Tab;