@smitch/fluid/lib/accordion/atoms/AccordionHead.js

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

"use client";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from "react";
import { Button } from "../..";
import { FaPlus, FaMinus, FaChevronLeft, FaChevronRight, FaChevronDown } from "react-icons/fa";
var iconStyles = "aspect-square text-current w-6 group-[.text-sm]:w-4 group-[.text-lg]:w-8";
var iconPositionStyles = {
    left: "justify-end flex-row-reverse",
    right: "justify-between",
};
var layoutStyles = {
    default: "p-2",
    spaced: "p-2",
    flush: "py-2 px-0",
};
var AccordionHead = function (_a) {
    var icon = _a.icon, _b = _a.iconPosition, iconPosition = _b === void 0 ? "right" : _b, _c = _a.iconColor, iconColor = _c === void 0 ? "current" : _c, _d = _a.layout, layout = _d === void 0 ? "default" : _d, id = _a.id, open = _a.open, setopen = _a.setopen, title = _a.title, name = _a.name;
    var iconPositionClasses = useMemo(function () { return iconPositionStyles[iconPosition]; }, [iconPosition]);
    var layoutnClasses = useMemo(function () { return layoutStyles[layout]; }, [layout]);
    return (_jsxs("h3", { className: "accordion-head ".concat(iconPositionClasses, " ").concat(layoutnClasses, " gap-1 peer font-semibold opacity-90 m-0 flex cursor-pointer items-center  text-xl group-[.text-sm]:text-lg group-[.text-lg]:text-2xl p-2 capitalize ").concat(open === id ? "open" : ""), onClick: function () { return setopen("".concat(open === id ? "" : id)); }, children: [title || name, _jsx(Button, { className: "accordion-btn shadow-none !p-0", layout: "circle", onClick: function () { return setopen("".concat(open === id ? "" : id)); }, btnBackground: "transparent", btnColor: iconColor, children: _jsxs(_Fragment, { children: [open === id ? (icon === "symbol" ? (_jsx(FaMinus, { className: iconStyles })) : (_jsx(FaChevronDown, { className: iconStyles }))) : icon === "symbol" ? (_jsx(FaPlus, { className: iconStyles })) : iconPosition === "left" ? (_jsx(FaChevronRight, { className: iconStyles })) : (_jsx(FaChevronLeft, { className: iconStyles })), _jsx("span", { className: "sr-only", children: "Toggle section" })] }) })] }));
};
export default AccordionHead;
//# sourceMappingURL=AccordionHead.js.map