hh-ui-components
Version:
22 lines • 2.27 kB
JavaScript
import React, { useState } from "react";
import ArrowDownIcon from "./ArrowDownIcon";
export var FilterDropdown = function (_a) {
var label = _a.label, child = _a.child;
var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
return (React.createElement("div", { className: "hidden lg:block" },
React.createElement("div", { className: "flex items-center" },
React.createElement("span", { className: " mr-[5px] text-body-large-lg 2xl:text-body-large-2xl 2xl:mr-[0.347vw] text-subdued" }, " "),
React.createElement("div", { className: "static" },
React.createElement(React.Fragment, null,
React.createElement("button", { className: "relative flex items-center focus:outline-none focus:outline-transparent", onClick: function () { return setIsOpen(!isOpen); } },
React.createElement("div", { className: "text-graphite-500 font-normal capitalize lg:mr-[10px] lg:text-[16px] lg:leading-[22.4px] 2xl:mr-[0.694vw] 2xl:text-[1.111vw] 2xl:leading-[1.556vw]", dangerouslySetInnerHTML: {
__html: "<span class=\"text-[#1A1817]\">".concat(label, "</span>")
} }),
React.createElement("div", { className: "flex items-center justify-center lg:h-[12px] lg:w-[12px] 2xl:h-[0.833vw] 2xl:w-[0.833vw]" },
React.createElement(ArrowDownIcon, { className: "".concat(isOpen
? "h-[0.75rem] w-[0.75rem] rotate-180 md:h-[1.563vw] md:w-[1.563vw] lg:h-[0.75rem] lg:w-[0.75rem] 2xl:h-[0.833vw] 2xl:w-[0.833vw]"
: "h-[0.75rem] w-[0.75rem] md:h-[1.563vw] md:w-[1.563vw] lg:h-[0.75rem] lg:w-[0.75rem] 2xl:h-[0.833vw] 2xl:w-[0.833vw]"), "aria-hidden": "true" }))),
isOpen ? (React.createElement("div", { className: "absolute left-0 right-0 z-50 w-full border-t border-secondary bg-primary lg:mt-5 lg:px-[40px] lg:pt-[30px] lg:pb-[40px] 2xl:mt-[1.389vw] 2xl:px-[2.778vw] 2xl:pt-[2.083vw] 2xl:pb-[2.778vw] animate-fadeIn" },
React.createElement("div", { className: "grid grid-cols-4 gap-[20px]" }, child))) : null)))));
};
//# sourceMappingURL=FilterDropdown.js.map