@smitch/fluid/lib/accordion/Accordion.js

A Next/React ui-component libray.

'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect, useMemo } from 'react';
import { twMerge } from 'tailwind-merge';
import { AccordionHead, AccordionCard } from './atoms';
var sizes = {
    sm: 'text-sm',
    md: 'text-base',
    lg: 'text-lg',
};
var layouts = {
    default: 'mb-0 border border-t-0 first:border-t',
    flush: 'border border-x-0 border-t-0 last:border-b-0',
    spaced: 'mb-2 border',
};
var Accordion = function (_a) {
    var _b = _a.className, className = _b === void 0 ? '' : _b, style = _a.style, _c = _a.size, size = _c === void 0 ? 'md' : _c, data = _a.data, opened = _a.opened, _d = _a.layout, layout = _d === void 0 ? 'default' : _d, _e = _a.icon, icon = _e === void 0 ? 'symbol' : _e, children = _a.children;
    var _f = useState(''), open = _f[0], setOpen = _f[1];
    useEffect(function () {
        if (opened)
            setOpen(opened);
    }, [opened]);
    var sizeClasses = useMemo(function () { return sizes[size]; }, [size]);
    var layoutClasses = useMemo(function () { return layouts[layout]; }, [layout]);
    return (_jsx("div", { className: twMerge("accordion group ".concat(sizeClasses), className), style: style, "data-testid": 'accordion', children: data ? (data.map(function (item) { return (_jsxs("div", { className: "".concat(layoutClasses, " bg-light text-dark dark:bg-dark dark:text-light border-neutral"), children: [_jsx(AccordionHead, { id: item.id, name: item.name, title: item.title, icon: icon, open: open, setopen: setOpen }), _jsx(AccordionCard, { title: item.title || item.name, src: item.src, description: item.description, link: item.link })] }, item.id)); })) : (_jsx("div", { children: children })) }));
};
export default Accordion;