Deploy

src/components/ui/Modal.tsx

@@ -0,0 +1,82 @@
+'use client'
+
+import { cn } from "@/lib/utils"
+import { useEffect, useRef, forwardRef, useCallback } from "react"
+import { X } from 'lucide-react'
+
+interface ModalProps {
+  isOpen: boolean
+  onClose: () => void
+  title?: string
+  children: React.ReactNode
+  className?: string
+}
+
+const Modal = forwardRef<HTMLDivElement, ModalProps>(
+  ({ isOpen, onClose, title, children, className }, ref) => {
+    const overlayRef = useRef<HTMLDivElement>(null)
+    const contentRef = useRef<HTMLDivElement>(null)
+
+    const handleKeyDown = useCallback(
+      (e: KeyboardEvent) => {
+        if (e.key === "Escape") {
+          onClose()
+        }
+      },
+      [onClose]
+    )
+
+    useEffect(() => {
+      if (isOpen) {
+        document.addEventListener("keydown", handleKeyDown)
+        document.body.style.overflow = "hidden"
+      }
+      return () => {
+        document.removeEventListener("keydown", handleKeyDown)
+        document.body.style.overflow = "unset"
+      }
+    }, [isOpen, handleKeyDown])
+
+    if (!isOpen) return null
+
+    return (
+      <div
+        ref={overlayRef}
+        className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"
+        onClick={(e) => {
+          if (e.target === overlayRef.current) onClose()
+        }}
+        role="dialog"
+        aria-modal="true"
+        aria-label={title || "Modal"}
+      >
+        <div
+          ref={ref || contentRef}
+          className={cn(
+            "relative w-full max-w-md rounded-lg bg-background p-6 shadow-lg",
+            className
+          )}
+        >
+          <button
+            onClick={onClose}
+            className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+            aria-label="Close modal"
+          >
+            <X className="h-4 w-4" />
+            <span className="sr-only">Close</span>
+          </button>
+          {title && (
+            <h2 className="mb-4 text-xl font-semibold leading-tight tracking-tight">
+              {title}
+            </h2>
+          )}
+          {children}
+        </div>
+      </div>
+    )
+  }
+)
+
+Modal.displayName = "Modal"
+
+export default Modal