"use client"; import Link from "next/link"; import { useState, useRef, useEffect } from "react"; import { TfiNewWindow } from "react-icons/tfi"; interface DropdownItem { label: string; onClick?: () => void; href?: string; } interface DropdownProps { trigger: React.ReactNode; items: DropdownItem[]; className?: string; dark: boolean; } export function Dropdown({ trigger, items, className, dark }: DropdownProps) { const [isOpen, setIsOpen] = useState(false); const dropdownRef = useRef(null); useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if ( dropdownRef.current && !dropdownRef.current.contains(event.target as Node) ) { setIsOpen(false); } }; document.addEventListener("mousedown", handleClickOutside); return () => document.removeEventListener("mousedown", handleClickOutside); }, []); useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { if (event.key == "Escape") { setIsOpen(false); } }; if (isOpen) { document.addEventListener("keydown", handleKeyDown); return () => document.removeEventListener("keydown", handleKeyDown); } }, [isOpen]); const handleTriggerClick = () => { setIsOpen(!isOpen); }; const handleItemClick = (item: DropdownItem) => { if (item.href) { return; } item.onClick?.(); setIsOpen(false); }; return (

{trigger}

{isOpen && (

{items.map((item, index) => (

handleItemClick(item)} className={`px-4 py-2 ${dark ? `hover:bg-gray-700` : `hover:bg-gray-100`} hover:rounded-md cursor-pointer`} > {item.href ? ( setIsOpen(false)} > {item.label} ) : (

{item.label}

)}

))}

)}

); }

Dropdown

Dropdown Example

Props

Dropdown

📦 Required Dependency