order detail

2025-08-26 15:58:24 +03:30
parent 90bf32f8fd
commit 09a210c943
6 changed files with 634 additions and 3 deletions
@@ -0,0 +1,65 @@
+'use client'
+import { FC, ReactNode, useEffect } from 'react'
+import { CloseCircle } from 'iconsax-react'
+import { cn } from '@/lib/utils'
+
+type Props = {
+    open: boolean
+    close: () => void
+    children: ReactNode
+    title?: string
+    isHeader?: boolean
+    className?: string
+}
+
+const Modal: FC<Props> = ({ open, close, children, title, isHeader = false, className }) => {
+    useEffect(() => {
+        if (open) {
+            document.body.style.overflow = 'hidden'
+        } else {
+            document.body.style.overflow = 'unset'
+        }
+
+        return () => {
+            document.body.style.overflow = 'unset'
+        }
+    }, [open])
+
+    if (!open) return null
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center">
+            {/* Backdrop */}
+            <div
+                className="absolute inset-0 bg-black/50 backdrop-blur-sm"
+                onClick={close}
+            />
+
+            {/* Modal */}
+            <div className={cn(
+                "relative bg-white rounded-2xl shadow-xl max-w-md w-full mx-4 max-h-[90vh] overflow-y-auto",
+                className
+            )}>
+                {/* Header */}
+                {isHeader && (
+                    <div className="flex items-center justify-between p-6 border-b border-gray-200">
+                        <h2 className="text-lg font-semibold text-gray-900">{title}</h2>
+                        <button
+                            onClick={close}
+                            className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                        >
+                            <CloseCircle size={20} />
+                        </button>
+                    </div>
+                )}
+
+                {/* Content */}
+                <div className="p-6">
+                    {children}
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Modal