@ducor/react
Version:
admin template ui interface
14 lines (13 loc) • 1.41 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Transition } from "@headlessui/react";
import { useState } from "react";
import { twMerge } from "tailwind-merge";
import Flex from "./flex";
const Section = ({ title, children, className, collapsable = true, }) => {
const [collapsed, setCollapsed] = useState(false);
const handleToggleCollapse = () => {
setCollapsed((prev) => !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: twMerge("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: twMerge("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;