@pagamio/frontend-commons-lib
Version:
Pagamio library for Frontend reusable components like the form engine and table container
22 lines (21 loc) • 1.19 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { RiArrowDownSLine, RiArrowUpSLine } from 'react-icons/ri';
/**
* FilterSection component for creating expandable/collapsible sections in a filter sidebar
*
* @example
* ```tsx
* <FilterSection
* title="Category"
* expanded={expandedSections.categories}
* toggleExpand={() => toggleSection("categories")}
* >
* <FilterList ... />
* </FilterSection>
* ```
*/
const FilterSection = ({ title, expanded, toggleExpand, children }) => {
return (_jsxs("div", { className: "border-b border-gray-200 py-4", children: [_jsxs("button", { className: "flex w-full items-center justify-between text-lg font-medium hover:text-primary-700", onClick: toggleExpand, "aria-expanded": expanded, "aria-controls": `filter-section-${title.toLowerCase().replace(/\s+/g, '-')}`, children: [title, expanded ? _jsx(RiArrowUpSLine, { size: 20, "aria-hidden": "true" }) : _jsx(RiArrowDownSLine, { size: 20, "aria-hidden": "true" })] }), expanded && (_jsx("div", { className: "mt-3", id: `filter-section-${title.toLowerCase().replace(/\s+/g, '-')}`, children: children }))] }));
};
export default FilterSection;