58 lines
1.8 KiB
TypeScript
58 lines
1.8 KiB
TypeScript
import { useEffect, type ReactNode } from 'react'
|
|
|
|
interface ModalProps {
|
|
open: boolean
|
|
title: string
|
|
onClose: () => void
|
|
children: ReactNode
|
|
footer?: ReactNode
|
|
size?: 'md' | 'lg' | 'xl'
|
|
}
|
|
|
|
const sizes = {
|
|
md: 'max-w-lg',
|
|
lg: 'max-w-2xl',
|
|
xl: 'max-w-4xl',
|
|
} as const
|
|
|
|
export function Modal({ open, title, onClose, children, footer, size = 'md' }: ModalProps) {
|
|
useEffect(() => {
|
|
if (!open) return
|
|
const handler = (event: KeyboardEvent) => {
|
|
if (event.key === 'Escape') onClose()
|
|
}
|
|
window.addEventListener('keydown', handler)
|
|
return () => window.removeEventListener('keydown', handler)
|
|
}, [open, onClose])
|
|
|
|
if (!open) return null
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
|
<div className="absolute inset-0 bg-slate-900/40 backdrop-blur-sm" onClick={onClose} />
|
|
<div
|
|
className={`relative z-10 w-full ${sizes[size]} animate-fade-in overflow-hidden rounded-2xl bg-white shadow-xl`}
|
|
role="dialog"
|
|
aria-modal="true"
|
|
>
|
|
<div className="flex items-center justify-between border-b border-slate-100 px-5 py-4">
|
|
<h2 className="text-lg font-bold text-slate-800">{title}</h2>
|
|
<button
|
|
onClick={onClose}
|
|
className="flex h-8 w-8 items-center justify-center rounded-lg text-slate-400 transition hover:bg-slate-100 hover:text-slate-600"
|
|
aria-label="بستن"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
<div className="max-h-[70vh] overflow-y-auto px-5 py-4">{children}</div>
|
|
{footer && (
|
|
<div className="flex items-center justify-end gap-2 border-t border-slate-100 bg-slate-50 px-5 py-3">
|
|
{footer}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|