diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx new file mode 100644 index 0000000..6ef7493 --- /dev/null +++ b/src/components/ui/Modal.tsx @@ -0,0 +1,68 @@ +'use client' + +import React, { useEffect, useRef } from 'react' +import { X } from 'lucide-react' +import { cn } from "@/lib/utils" + +interface ModalProps { + open: boolean + onClose: () => void + title?: string + children: React.ReactNode + className?: string +} + +export default function Modal({ open, onClose, title, children, className }: ModalProps) { + const overlayRef = useRef(null) + + useEffect(() => { + const handleKeyDown = (e: KeyboardEvent) => { + if (e.key === 'Escape') onClose() + } + if (open) { + document.addEventListener('keydown', handleKeyDown) + document.body.style.overflow = 'hidden' + } + return () => { + document.removeEventListener('keydown', handleKeyDown) + document.body.style.overflow = 'auto' + } + }, [open, onClose]) + + if (!open) return null + + const handleOverlayClick = (e: React.MouseEvent) => { + if (e.target === overlayRef.current) onClose() + } + + return ( +
+
+ + {title && ( +

+ {title} +

+ )} + {children} +
+
+ ) +} \ No newline at end of file