@smitch/fluid
Version:
A lightweight, Tailwind-powered React/Next.js UI component library.
28 lines • 2.03 kB
JavaScript
"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, _f = _a.iconPosition, iconPosition = _f === void 0 ? "right" : _f, iconColor = _a.iconColor, children = _a.children;
var _g = useState(""), open = _g[0], setOpen = _g[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: "accordion-wrapper ".concat(layoutClasses, " bg-light text-dark dark:bg-dark dark:text-light border-slate-300 dark:border-slate-500"), children: [_jsx(AccordionHead, { id: item.id, name: item.name, title: item.title, icon: icon, iconPosition: iconPosition, iconColor: iconColor, layout: layout, open: open, setopen: setOpen }), _jsx(AccordionCard, { title: item.title || item.name, src: item.src, description: item.description, link: item.link })] }, item.id)); })) : (_jsx("div", { className: "accordion-children", children: children })) }));
};
export default Accordion;
//# sourceMappingURL=Accordion.js.map