@ducor/react
Version:
admin template ui interface
47 lines (46 loc) • 2.77 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { createContext, useContext, useState } from "react";
import { twMerge } from "tailwind-merge";
var TabContext = createContext(undefined);
export var TabProvider = function (_a) {
var children = _a.children;
var _b = useState(0), activeTab = _b[0], setActiveTab = _b[1];
return (_jsx(TabContext.Provider, { value: { activeTab: activeTab, setActiveTab: setActiveTab }, children: children }));
};
export var useTabContext = function () {
var context = useContext(TabContext);
if (!context) {
throw new Error("useTabContext must be used within a TabProvider");
}
return context;
};
var TabGroup = function (_a) {
var children = _a.children, className = _a.className;
return (_jsx(TabProvider, { children: _jsx("div", { className: twMerge("w-full", className), children: children }) }));
};
var TabList = function (_a) {
var children = _a.children, className = _a.className;
return (_jsx("div", { role: 'tablist', className: twMerge("flex space-x-2 bg-gray-100 p-1 rounded-md dark:bg-gray-800 w-full overflow-x-auto", className), children: children }));
};
var Tab = function (_a) {
var children = _a.children, className = _a.className, index = _a.index;
var _b = useTabContext(), activeTab = _b.activeTab, setActiveTab = _b.setActiveTab;
var isActive = activeTab === index;
return (_jsx("button", { role: 'tab', "aria-selected": isActive, className: twMerge("px-3 py-2 text-sm font-medium rounded-md focus:outline-none transition ", isActive
? "text-blue-400 bg-white font-semibold dark:text-blue-300 dark:bg-gray-700"
: "text-gray-600 hover:bg-gray-700/10 dark:text-gray-300 dark:hover:bg-gray-700/50", className), onClick: function () { return setActiveTab(index); }, children: children }));
};
var TabPanel = function (_a) {
var children = _a.children, className = _a.className, index = _a.index;
var activeTab = useTabContext().activeTab;
return (_jsx("div", { role: 'tabpanel', className: twMerge(activeTab === index ? "block" : "hidden", "p-2 space-y-2 dark:bg-gray-800", className), children: children }));
};
var TabPanels = function (_a) {
var children = _a.children, className = _a.className;
return (_jsx("div", { className: twMerge("mt-2 max-h-[50vh] overflow-y-auto", className), children: children }));
};
var TabPanelFooter = function (_a) {
var children = _a.children, className = _a.className;
return (_jsx("div", { className: twMerge("flex justify-end mt-2 rounded-md ", className), children: _jsx("button", { className: 'flex items-center p-1 text-blue-500 hover:text-blue-700', children: children }) }));
};
export { Tab, TabList, TabPanel, TabPanels, TabGroup, TabPanelFooter };