@ducor/react
Version:
admin template ui interface
24 lines (23 loc) • 1.55 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { twMerge } from "tailwind-merge";
import Button from "./button";
import Flex from "./flex";
var Tabs = function (_a) {
var items = _a.items, activeKey = _a.activeKey, defaultActiveKey = _a.defaultActiveKey, className = _a.className, onChange = _a.onChange;
var _b = useState(activeKey || defaultActiveKey), key = _b[0], setKey = _b[1];
var handleChange = function (key) {
if (onChange) {
onChange(key);
}
if (activeKey === undefined) {
setKey(key);
}
};
return (_jsxs("div", { className: twMerge("w-full", className), children: [_jsxs(Flex, { className: 'border-b border-gray-300 relative', children: [_jsx(Button, { className: 'invisible', children: "Hidden" }), _jsx("div", { className: 'absolute inset-0 top-[-0.5px]', children: items.map(function (item) { return (_jsx(Button, { variant: 'transparent', onClick: function () { return handleChange(item.key); }, className: twMerge("border-b-2 rounded-none", key === item.key
? "text-blue-600 border-blue-600"
: "text-gray-600 hover:text-blue-600"), children: item.label }, item.key)); }) })] }), _jsx("div", { className: 'p-4', children: items.map(function (item) {
return key === item.key ? (_jsx("div", { className: 'text-gray-700', children: item.children }, item.key)) : null;
}) })] }));
};
export default Tabs;