seti-ramesesv1/dist/components/common/TabList.js

Reusable components and context for Next.js apps

import { jsx } from 'react/jsx-runtime';
import { usePathname } from 'next/navigation';
import { useState, useEffect } from 'react';
import styles from '../../styles/TabList.module.css.js';

const TabList = ({ items, value, orientation = "horizontal", openItem }) => {
    const pathname = usePathname();
    const pathSegments = pathname.split("/").filter(Boolean);
    const defaultTab = value ?? pathSegments[pathSegments.length - 1] ?? items[0]?.id;
    const [activeTabId, setActiveTabId] = useState(defaultTab);
    useEffect(() => {
        const selected = items.find((item) => item.id === activeTabId);
        if (selected && openItem)
            openItem(selected);
    }, [activeTabId]);
    const handleClick = (item) => {
        setActiveTabId(item.id);
    };
    return (jsx("div", { className: `${styles.tabListContainer} ${orientation === "vertical" ? styles.vertical : styles.horizontal}`, children: items.map((item) => (jsx("button", { onClick: () => handleClick(item), className: `${styles.tabButton} ${activeTabId === item.id ? styles.activeTab : ""}`, children: item.label }, item.id))) }));
};

export { TabList as default };
//# sourceMappingURL=TabList.js.map