@violetprotocol/nudge-components
Version:
Components for Nudge's websites and applications.
28 lines (27 loc) • 2.5 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, useRef } from "react";
import { Icon, Typography } from "..";
import { clsx } from "clsx";
export 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) => {
// Close when user clicks anywhere except the dropdown menu or button itself
if (!dropdownRef.current?.contains(event.target) &&
!mobileMenuRef.current?.contains(event.target) &&
!desktopMenuRef.current?.contains(event.target)) {
setIsOpen(false);
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, [setIsOpen]);
if (!children)
return null;
return (_jsxs(_Fragment, { children: [_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((isOpen) => !isOpen), children: [_jsx("div", { className: "text-neutral-800", children: selectedOption }), _jsx(Icon, { name: isOpen ? "chevron-up" : "chevron-down", className: "ml-3" })] }), isOpen && (_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: children })), isOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed top-0 left-0 w-screen h-screen bg-[#020203] bg-opacity-50 sm:hidden z-30" }), _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: [_jsxs("div", { className: "flex items-center justify-between mb-7", children: [_jsx(Typography, { variant: "p", className: "font-medium text-neutral-950", children: mobilHeaderTitle }), _jsx("div", { onClick: () => setIsOpen(false), className: "bg-neutral-100 rounded-full h-8 w-8 flex items-center justify-center", children: _jsx(Icon, { name: "close", className: "cursor-pointer", color: "neutral-700" }) })] }), children] })] }))] }));
};