'use client' import { useRef, useState } from 'react' import { useOnClickOutside } from '@/components/hooks/use-click-outside' import { Button } from '@/components/ui/button' import { X } from 'lucide-react' function SimpleDropdownDemo() { const [isOpen, setIsOpen] = useState(false) const ref = useRef(null) useOnClickOutside(ref, () => setIsOpen(false)) return (

Simple Dropdown

{isOpen && (

Click outside to close

)}

) } function ModalDemo() { const [isOpen, setIsOpen] = useState(false) const modalRef = useRef(null) useOnClickOutside(modalRef, () => setIsOpen(false)) return (

Modal Example {isOpen && (

Modal Title

Click outside or the X button to close this modal.

)}

) } function MenuDemo() { const [isOpen, setIsOpen] = useState(false) const menuRef = useRef(null) useOnClickOutside(menuRef, () => setIsOpen(false)) const menuItems = [ 'Profile', 'Settings', 'Notifications', 'Help', 'Sign out' ] return (

Menu Example

{isOpen && (

{menuItems.map((item) => ( ))}

)}

) } export { SimpleDropdownDemo, ModalDemo, MenuDemo };