@pagamio/frontend-commons-lib
Version:
Pagamio library for Frontend reusable components like the form engine and table container
15 lines (14 loc) • 1.31 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import classNames from 'classnames';
import { useState } from 'react';
import { useTranslation } from '../../translations';
const VerticalTabsLayout = ({ content }) => {
const [activeTab, setActiveTab] = useState(content[0].id);
const { t } = useTranslation();
return (_jsxs("div", { className: "flex ", children: [_jsx("div", { className: "bg-gray-10 w-[260px]", children: _jsx("ul", { className: "flex flex-col space-y-3 border-r border-primary-700 pr-4", children: content.map((tab) => (_jsx("li", { children: _jsx("button", { type: "button", className: classNames('flex w-full cursor-pointer items-center justify-center rounded-lg p-4 text-lg font-semibold', {
'border border-gray-400 text-gray-700 hover:bg-gray-400 hover:text-white': activeTab === tab.id,
'bg-gray-300 text-gray-700 hover:bg-gray-200': activeTab !== tab.id,
}), onClick: () => setActiveTab(tab.id), children: t(tab.label) }) }, tab.id))) }) }), _jsx("div", { className: "flex-1 p-6", children: _jsx("div", { className: "text-xl text-gray-800", children: content.find((tab) => tab.id === activeTab)?.content }) })] }));
};
export default VerticalTabsLayout;