isuggest.selfce.st
alternative tangled frontend (extremely wip)
feat: dropdown modal
+48
src/components/Dropdown/DropdownModal.tsx
+48
src/components/Dropdown/DropdownModal.tsx
···
1
+
import { useModalEscapeEffect } from "@/lib/hooks/useModalEscapeEffect";
2
+
import { useModalMousedownEffect } from "@/lib/hooks/useModalMousedownEffect";
3
+
import { AnimatePresence, motion } from "motion/react";
4
+
import { ReactNode, useRef, useState } from "react";
5
+
6
+
export const DropdownModal = ({
7
+
buttonComponent,
8
+
children,
9
+
className,
10
+
}: {
11
+
buttonComponent: ReactNode;
12
+
children: ReactNode;
13
+
className?: string;
14
+
}) => {
15
+
const [showDropdown, setShowDropdown] = useState(false);
16
+
17
+
const dropdownRef = useRef<HTMLDivElement>(null);
18
+
19
+
useModalEscapeEffect({ setShowModal: setShowDropdown });
20
+
useModalMousedownEffect({
21
+
setShowModal: setShowDropdown,
22
+
modalRef: dropdownRef,
23
+
});
24
+
25
+
return (
26
+
<div ref={dropdownRef} className="relative inline-block">
27
+
<button
28
+
className="cursor-pointer"
29
+
onClick={() => setShowDropdown((prev) => !prev)}
30
+
>
31
+
{buttonComponent}
32
+
</button>
33
+
<AnimatePresence>
34
+
{showDropdown && (
35
+
<motion.div
36
+
initial={{ opacity: 0, x: 8 }}
37
+
animate={{ opacity: 1, x: 0 }}
38
+
exit={{ opacity: 0, x: 8 }}
39
+
transition={{ duration: 0.1, ease: "easeOut" }}
40
+
className={`absolute right-0 z-50 origin-top-right cursor-default ${className}`}
41
+
>
42
+
{children}
43
+
</motion.div>
44
+
)}
45
+
</AnimatePresence>
46
+
</div>
47
+
);
48
+
};