@ducor/react
Version:
admin template ui interface
42 lines (41 loc) • 2.84 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState, Children, useCallback } from "react";
import { twMerge } from "tailwind-merge";
import Button from "./button";
export const Tabs = ({ variant = "filled", position = "top", // Default to top
activeKey, defaultActiveKey, onSelect, className, children, }) => {
const chilArray = Children.toArray(children);
// Ensure the first tab is selected if no defaultActiveKey is provided
const [internalActiveKey, setInternalActiveKey] = useState(defaultActiveKey ||
(chilArray.length > 0 ? chilArray[0].props.eventKey : ""));
const currentActiveKey = activeKey || internalActiveKey;
const handleSelect = useCallback((eventKey) => {
if (onSelect) {
onSelect(eventKey);
}
else {
setInternalActiveKey(eventKey);
}
}, [onSelect]);
const childrenArray = Children.toArray(children);
const activeTab = childrenArray.find((child) => child.props.eventKey === currentActiveKey);
// Define flex-direction based on tab position (top, bottom, left, or right)
const flexDirection = {
top: "flex-col",
bottom: "flex-col-reverse",
left: "flex-row",
right: "flex-row-reverse",
};
return (_jsxs("div", { className: twMerge("flex ", flexDirection[position], // Apply the flex direction based on position
className), children: [_jsx("nav", { className: ' min-h-10 relative p-2 ', children: _jsx("ul", { className: twMerge(position === "left" || position === "right"
? "flex flex-col space-y-2"
: "flex gap-2"), children: childrenArray.map((child, key) => {
const { eventKey, title, icon, disabled } = child.props;
return (_jsx("li", { children: _jsxs(Button, { size: "sm", variant: variant, color: currentActiveKey === eventKey ? "primary" : "default", active: currentActiveKey === eventKey, onClick: () => !disabled && handleSelect(eventKey), disabled: disabled, children: [icon && _jsx("span", { children: icon }), " ", _jsx("span", { children: title })] }) }, key));
}) }) }), _jsx("div", { className: twMerge("flex-1 p-4 rounded-lg transition-all duration-300 ease-in-out max-h-[80vh] overflow-auto bg-gray-50 dark:bg-gray-600/50", position === "top" || position === "bottom"
? "border-t-0"
: "border-l-0" // Conditional border styles for horizontal vs vertical tabs
// position === "bottom" && "pt-0" // Adjust padding for bottom tabs
), children: activeTab === null || activeTab === void 0 ? void 0 : activeTab.props.children })] }));
};
export const Tab = ({ children }) => _jsx(_Fragment, { children: children });