@ducor/react
Version:
admin template ui interface
15 lines (14 loc) • 1.55 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Transition } from "@headlessui/react";
import { useState } from "react";
import { twJoin, twMerge } from "tailwind-merge";
import Flex from "./flex";
var Section = function (_a) {
var title = _a.title, children = _a.children, className = _a.className, _b = _a.collapsable, collapsable = _b === void 0 ? true : _b;
var _c = useState(false), collapsed = _c[0], setCollapsed = _c[1];
var handleToggleCollapse = function () {
setCollapsed(function (prev) { return !prev; });
};
return (_jsxs("section", { "data-dui": 'section', className: twMerge("relative bg-transparent mt-0 mb-3 p-0 mx-0", className), children: [_jsxs(Flex, { justify: 'between', align: 'center', className: twJoin("h-10 bg-gray-200 px-4 rounded-md", collapsed ? "" : ""), children: [_jsx("div", { children: title }), collapsable && (_jsx("button", { onClick: handleToggleCollapse, "aria-expanded": !collapsed, className: 'cursor-pointer', children: _jsx("i", { className: twJoin("transition-transform duration-300 ease-in-out", collapsed ? "feather-plus" : "feather-minus") }) }))] }), _jsx(Transition, { show: !collapsed, enter: 'transition-all duration-300 ease-in-out', enterFrom: 'max-h-0 opacity-0', enterTo: 'max-h-screen opacity-100', leave: 'transition-all duration-300 ease-in-out', leaveFrom: 'max-h-screen opacity-100', leaveTo: 'max-h-0 opacity-0', children: _jsx("div", { className: "overflow-auto mb-3", children: children }) })] }));
};
export default Section;