optimization

src/components/common/Dialog.tsx

@@ -0,0 +1,72 @@
+"use client"
+
+import { useEffect } from 'react'
+import { X } from 'lucide-react'
+
+type DialogProps = {
+    isOpen: boolean
+    onClose: () => void
+    title: string
+    children: React.ReactNode
+}
+
+export function Dialog({ isOpen, onClose, title, children }: DialogProps) {
+    // Close on Escape key
+    useEffect(() => {
+        if (!isOpen) return
+
+        const handleEscape = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') {
+                onClose()
+            }
+        }
+
+        document.addEventListener('keydown', handleEscape)
+        return () => document.removeEventListener('keydown', handleEscape)
+    }, [isOpen, onClose])
+
+    // Prevent body scroll when dialog is open
+    useEffect(() => {
+        if (isOpen) {
+            document.body.style.overflow = 'hidden'
+        } else {
+            document.body.style.overflow = ''
+        }
+        return () => {
+            document.body.style.overflow = ''
+        }
+    }, [isOpen])
+
+    if (!isOpen) return null
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+            {/* Backdrop */}
+            <div 
+                className="absolute inset-0 bg-black/50 backdrop-blur-sm"
+                onClick={onClose}
+            />
+            
+            {/* Dialog */}
+            <div className="relative bg-white rounded-2xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-hidden flex flex-col z-10">
+                {/* Header */}
+                <div className="flex items-center justify-between p-6 border-b border-gray-200">
+                    <h2 className="text-xl font-bold text-gray-900">{title}</h2>
+                    <button
+                        onClick={onClose}
+                        className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                        aria-label="بستن"
+                    >
+                        <X className="w-5 h-5 text-gray-500" />
+                    </button>
+                </div>
+                
+                {/* Content */}
+                <div className="flex-1 overflow-y-auto p-6">
+                    {children}
+                </div>
+            </div>
+        </div>
+    )
+}
+