128 lines
4.3 KiB
TypeScript
128 lines
4.3 KiB
TypeScript
'use client';
|
|
|
|
interface AlertModalProps {
|
|
isOpen: boolean;
|
|
type: 'success' | 'error' | 'info' | 'warning';
|
|
title: string;
|
|
message: string;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export default function AlertModal({
|
|
isOpen,
|
|
type,
|
|
title,
|
|
message,
|
|
onClose,
|
|
}: AlertModalProps) {
|
|
if (!isOpen) return null;
|
|
|
|
const getStyles = () => {
|
|
switch (type) {
|
|
case 'success':
|
|
return {
|
|
bg: 'bg-green-50',
|
|
titleColor: 'text-green-900',
|
|
messageColor: 'text-green-800',
|
|
icon: (
|
|
<svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
),
|
|
button: 'bg-green-600 text-white hover:bg-green-700',
|
|
};
|
|
case 'error':
|
|
return {
|
|
bg: 'bg-red-50',
|
|
titleColor: 'text-red-900',
|
|
messageColor: 'text-red-800',
|
|
icon: (
|
|
<svg className="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
),
|
|
button: 'bg-red-600 text-white hover:bg-red-700',
|
|
};
|
|
case 'warning':
|
|
return {
|
|
bg: 'bg-orange-50',
|
|
titleColor: 'text-orange-900',
|
|
messageColor: 'text-orange-800',
|
|
icon: (
|
|
<svg className="w-6 h-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
|
</svg>
|
|
),
|
|
button: 'bg-orange-600 text-white hover:bg-orange-700',
|
|
};
|
|
default:
|
|
return {
|
|
bg: 'bg-blue-50',
|
|
titleColor: 'text-blue-900',
|
|
messageColor: 'text-blue-800',
|
|
icon: (
|
|
<svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
),
|
|
button: 'bg-blue-600 text-white hover:bg-blue-700',
|
|
};
|
|
}
|
|
};
|
|
|
|
const styles = getStyles();
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-[60] p-4 animate-fadeIn"
|
|
onClick={onClose}
|
|
>
|
|
<div
|
|
className="bg-white rounded-lg shadow-xl max-w-md w-full animate-slideUp border border-gray-200"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
{/* Header */}
|
|
<div className={`border-b border-gray-200 px-6 py-5 ${styles.bg}`}>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
{styles.icon}
|
|
<h2 className={`text-xl font-semibold ${styles.titleColor}`}>
|
|
{title}
|
|
</h2>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="text-gray-400 hover:text-gray-600 transition-colors p-1.5 hover:bg-white/50 rounded"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="px-6 py-6">
|
|
<p className={`text-sm font-medium ${styles.messageColor}`}>
|
|
{message}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="border-t border-gray-200 px-6 py-4 bg-gray-50/50">
|
|
<div className="flex justify-end">
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className={`px-6 py-2 text-sm font-medium rounded-lg transition-colors ${styles.button}`}
|
|
>
|
|
OK
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|