@pagamio/frontend-commons-lib/lib/components/ui/VerticalTab.js

Pagamio library for Frontend reusable components like the form engine and table container

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
const VerticalTab = ({ tabs, className, defaultTab = 0, onTabChange }) => {
    const [activeTab, setActiveTab] = useState(defaultTab);
    const handleTabClick = (index) => {
        setActiveTab(index);
        onTabChange?.(index);
    };
    return (_jsxs("div", { className: `flex flex-col md:flex-row gap-4 ${className}`, children: [_jsx("div", { className: "md:w-64 flex-shrink-0", children: _jsx("ul", { className: "flex flex-row md:flex-col space-x-2 md:space-x-0 md:space-y-2 text-sm font-medium text-gray-500 dark:text-gray-400 overflow-x-auto md:overflow-x-visible", children: tabs.map((tab, index) => (_jsx("li", { className: "flex-shrink-0", children: _jsxs("button", { onClick: () => handleTabClick(index), className: `inline-flex items-center px-4 py-3 rounded-lg w-full text-left transition-colors duration-200 focus:outline-none whitespace-nowrap ${activeTab === index
                                ? 'text-white bg-primary-500 hover:bg-primary-600 dark:bg-primary-500'
                                : 'text-gray-500 bg-gray-50 hover:text-gray-900 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 dark:hover:text-white'}`, children: [tab.icon && (_jsx("span", { className: `w-4 h-4 me-2 ${activeTab === index ? 'text-white' : 'text-gray-500 dark:text-gray-400'}`, children: tab.icon })), tab.title] }) }, tab.id))) }) }), _jsx("div", { className: "flex-1 min-w-0", children: _jsx("div", { className: "bg-white border border-gray-200 dark:bg-gray-900 dark:border-gray-700 rounded-lg p-6", children: tabs[activeTab]?.content }) })] }));
};
export default VerticalTab;