76 lines
2.8 KiB
TypeScript
76 lines
2.8 KiB
TypeScript
|
import React, { useEffect } from 'react';
|
||
|
|
|
||
|
|
interface ErrorDetailModalProps {
|
||
|
|
isOpen: boolean;
|
||
|
|
onClose: () => void;
|
||
|
|
errorMessage: string | null;
|
||
|
|
}
|
||
|
|
|
||
|
|
const ErrorDetailModal: React.FC<ErrorDetailModalProps> = ({ isOpen, onClose, errorMessage }) => {
|
||
|
|
useEffect(() => {
|
||
|
|
if (isOpen) {
|
||
|
|
document.body.style.overflow = 'hidden';
|
||
|
|
} else {
|
||
|
|
document.body.style.overflow = 'auto';
|
||
|
|
}
|
||
|
|
return () => {
|
||
|
|
document.body.style.overflow = 'auto';
|
||
|
|
};
|
||
|
|
}, [isOpen]);
|
||
|
|
|
||
|
|
if (!isOpen) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className="fixed inset-0 bg-black bg-opacity-70 z-50 flex justify-center items-center p-4 animate-fade-in-fast"
|
||
|
|
onClick={onClose}
|
||
|
|
role="dialog"
|
||
|
|
aria-modal="true"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
className="bg-slate-800 border border-slate-700 rounded-2xl shadow-2xl w-full max-w-2xl max-h-[90vh] flex flex-col p-6 animate-slide-up"
|
||
|
|
onClick={e => e.stopPropagation()}
|
||
|
|
>
|
||
|
|
<div className="flex justify-between items-center mb-4 pb-4 border-b border-slate-700">
|
||
|
|
<h2 className="text-xl font-semibold text-rose-400">Chi tiết Lỗi</h2>
|
||
|
|
<button onClick={onClose} className="text-slate-400 hover:text-white transition-colors text-3xl leading-none">×</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex-grow overflow-y-auto pr-2 -mr-2">
|
||
|
|
<pre className="bg-slate-900/50 p-4 rounded-lg text-slate-300 whitespace-pre-wrap break-all font-mono text-sm">
|
||
|
|
{errorMessage || 'Không có chi tiết lỗi.'}
|
||
|
|
</pre>
|
||
|
|
</div>
|
||
|
|
<div className="mt-6 pt-4 border-t border-slate-700 text-right">
|
||
|
|
<button
|
||
|
|
onClick={onClose}
|
||
|
|
className="text-white bg-slate-600 hover:bg-slate-700 font-medium rounded-lg text-sm px-5 py-2.5"
|
||
|
|
>
|
||
|
|
Đóng
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<style>{`
|
||
|
|
@keyframes fade-in-fast {
|
||
|
|
from { opacity: 0; }
|
||
|
|
to { opacity: 1; }
|
||
|
|
}
|
||
|
|
.animate-fade-in-fast {
|
||
|
|
animation: fade-in-fast 0.2s ease-out forwards;
|
||
|
|
}
|
||
|
|
@keyframes slide-up {
|
||
|
|
from { opacity: 0; transform: translateY(20px); }
|
||
|
|
to { opacity: 1; transform: translateY(0); }
|
||
|
|
}
|
||
|
|
.animate-slide-up {
|
||
|
|
animation: slide-up 0.3s ease-out forwards;
|
||
|
|
}
|
||
|
|
`}</style>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ErrorDetailModal;
|