123 lines
3.8 KiB
JavaScript
123 lines
3.8 KiB
JavaScript
import { useEffect } from 'react'
|
|
import { createPortal } from 'react-dom'
|
|
import { X, AlertTriangle } from 'lucide-react'
|
|
import { useLanguage } from '../i18n/LanguageContext'
|
|
|
|
export default function Modal({
|
|
isOpen,
|
|
onClose,
|
|
title,
|
|
children,
|
|
size = 'md',
|
|
// Confirmation mode props
|
|
isConfirm = false,
|
|
confirmText,
|
|
cancelText,
|
|
onConfirm,
|
|
danger = false,
|
|
}) {
|
|
const { t } = useLanguage()
|
|
|
|
// Default translations
|
|
const finalConfirmText = confirmText || (danger ? t('common.delete') : t('common.save'))
|
|
const finalCancelText = cancelText || t('common.cancel')
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
document.body.style.overflow = 'hidden'
|
|
} else {
|
|
document.body.style.overflow = ''
|
|
}
|
|
return () => { document.body.style.overflow = '' }
|
|
}, [isOpen])
|
|
|
|
if (!isOpen) return null
|
|
|
|
const sizeClasses = {
|
|
sm: 'max-w-md',
|
|
md: 'max-w-lg',
|
|
lg: 'max-w-2xl',
|
|
xl: 'max-w-4xl',
|
|
}
|
|
|
|
// Confirmation dialog
|
|
if (isConfirm) {
|
|
return createPortal(
|
|
<div className="fixed inset-0 z-[9999] flex items-center justify-center px-4">
|
|
{/* Backdrop */}
|
|
<div
|
|
className="fixed inset-0 bg-black/40 backdrop-blur-sm animate-backdrop-in"
|
|
onClick={onClose}
|
|
/>
|
|
|
|
{/* Modal content */}
|
|
<div className="relative bg-white rounded-2xl shadow-2xl w-full max-w-md animate-scale-in">
|
|
<div className="p-6">
|
|
{danger && (
|
|
<div className="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center mx-auto mb-4">
|
|
<AlertTriangle className="w-6 h-6 text-red-600" />
|
|
</div>
|
|
)}
|
|
<h3 className="text-lg font-semibold text-text-primary text-center mb-2">{title}</h3>
|
|
<div className="text-sm text-text-secondary text-center mb-6">
|
|
{children}
|
|
</div>
|
|
<div className="flex items-center gap-3">
|
|
<button
|
|
onClick={onClose}
|
|
className="flex-1 px-4 py-2.5 text-sm font-medium text-text-secondary hover:bg-surface-tertiary rounded-lg transition-colors"
|
|
>
|
|
{finalCancelText}
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
onConfirm?.();
|
|
onClose();
|
|
}}
|
|
className={`flex-1 px-4 py-2.5 text-sm font-medium text-white rounded-lg shadow-sm transition-colors ${
|
|
danger
|
|
? 'bg-red-600 hover:bg-red-700'
|
|
: 'bg-brand-primary hover:bg-brand-primary-light'
|
|
}`}
|
|
>
|
|
{finalConfirmText}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>,
|
|
document.body
|
|
)
|
|
}
|
|
|
|
// Regular modal
|
|
return createPortal(
|
|
<div className="fixed inset-0 z-[9999] flex items-start justify-center pt-[10vh] px-4">
|
|
{/* Backdrop */}
|
|
<div
|
|
className="fixed inset-0 bg-black/40 backdrop-blur-sm animate-backdrop-in"
|
|
onClick={onClose}
|
|
/>
|
|
|
|
{/* Modal content */}
|
|
<div className={`relative bg-white rounded-2xl shadow-2xl w-full ${sizeClasses[size]} max-h-[80vh] flex flex-col animate-scale-in`}>
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between px-6 py-4 border-b border-border shrink-0">
|
|
<h3 className="text-lg font-semibold text-text-primary">{title}</h3>
|
|
<button
|
|
onClick={onClose}
|
|
className="p-1.5 rounded-lg hover:bg-surface-tertiary text-text-tertiary hover:text-text-primary transition-colors"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Body */}
|
|
<div className="px-6 py-4 overflow-y-auto flex-1">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>,
|
|
document.body
|
|
)
|
|
}
|