55 lines
1.7 KiB
TypeScript
55 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useRef, useEffect } from "react";
|
|
import type { ReactNode } from "react";
|
|
import { motion, AnimatePresence } from "motion/react";
|
|
import { ChevronDown } from "lucide-react";
|
|
import { cls } from "@/lib/utils";
|
|
|
|
interface DropdownProps {
|
|
children: ReactNode;
|
|
label: string;
|
|
className?: string;
|
|
}
|
|
|
|
const Dropdown = ({ children, label, className = "" }: DropdownProps) => {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
const handleClickOutside = (e: MouseEvent) => {
|
|
if (ref.current && !ref.current.contains(e.target as Node)) setIsOpen(false);
|
|
};
|
|
document.addEventListener("mousedown", handleClickOutside);
|
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
}, []);
|
|
|
|
return (
|
|
<div ref={ref} className={cls("relative", className)}>
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
className="flex items-center gap-2 h-9 px-3 rounded secondary-button text-secondary-cta-text text-sm cursor-pointer"
|
|
>
|
|
<span>{label}</span>
|
|
<ChevronDown className={cls("h-(--text-sm) w-auto transition-transform duration-300 ease-in-out", isOpen && "rotate-180")} />
|
|
</button>
|
|
<AnimatePresence>
|
|
{isOpen && (
|
|
<motion.div
|
|
className="absolute z-50 mt-2 rounded secondary-button overflow-hidden"
|
|
initial={{ opacity: 0, y: -4 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: -4 }}
|
|
transition={{ duration: 0.25 }}
|
|
>
|
|
{children}
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Dropdown;
|