UNPKG

@smitch/fluid

Version:

A lightweight, Tailwind-powered React/Next.js UI component library.

28 lines 2.03 kB
"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