@violetprotocol/nudge-components
Version:
Components for Nudge's websites and applications.
91 lines (90 loc) • 3.27 kB
JavaScript
"use client";
import { jsxs, Fragment, jsx } from "react/jsx-runtime";
import { useRef, useEffect } from "react";
import { clsx } from "clsx";
import { Icon } from "../Icon/Icon.esm.js";
import { Typography } from "../Typography/Typography.esm.js";
const Dropdown = ({
isOpen,
setIsOpen,
selectedOption,
mobilHeaderTitle,
children,
className,
desktopMenuClassName
}) => {
const dropdownRef = useRef(null);
const desktopMenuRef = useRef(null);
const mobileMenuRef = useRef(null);
useEffect(() => {
const handleClickOutside = (event) => {
var _a, _b, _c;
if (!((_a = dropdownRef.current) == null ? void 0 : _a.contains(event.target)) && !((_b = mobileMenuRef.current) == null ? void 0 : _b.contains(event.target)) && !((_c = desktopMenuRef.current) == null ? void 0 : _c.contains(event.target))) {
setIsOpen(false);
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, [setIsOpen]);
if (!children)
return null;
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsxs(
"div",
{
ref: dropdownRef,
className: `relative flex items-center justify-between max-w-[280px] border border-neutral-200 rounded-full py-[14px] px-5 cursor-pointer ${clsx(className)}`,
onClick: () => setIsOpen((isOpen2) => !isOpen2),
children: [
/* @__PURE__ */ jsx("div", { className: "text-neutral-800", children: selectedOption }),
/* @__PURE__ */ jsx(Icon, { name: isOpen ? "chevron-up" : "chevron-down", className: "ml-3" })
]
}
),
isOpen && /* @__PURE__ */ jsx(
"div",
{
ref: desktopMenuRef,
className: `absolute z-40 bg-neutral-0 rounded-xl border shadow-xl w-fit mt-2 p-3 hidden sm:block ${clsx(desktopMenuClassName)}`,
children
}
),
isOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx("div", { className: "fixed top-0 left-0 w-screen h-screen bg-[#020203] bg-opacity-50 sm:hidden z-30" }),
/* @__PURE__ */ jsxs(
"div",
{
ref: mobileMenuRef,
className: "fixed bottom-0 left-0 rounded-t-3xl p-6 border w-full sm:hidden bg-neutral-0 z-50",
children: [
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-7", children: [
/* @__PURE__ */ jsx(Typography, { variant: "p", className: "font-medium text-neutral-950", children: mobilHeaderTitle }),
/* @__PURE__ */ jsx(
"div",
{
onClick: () => setIsOpen(false),
className: "bg-neutral-100 rounded-full h-8 w-8 flex items-center justify-center",
children: /* @__PURE__ */ jsx(
Icon,
{
name: "close",
className: "cursor-pointer",
color: "neutral-700"
}
)
}
)
] }),
children
]
}
)
] })
] });
};
export {
Dropdown
};
//# sourceMappingURL=Dropdown.esm.js.map