38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
|
|
import React from 'react';
|
|
|
|
interface ModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onConfirm: () => void;
|
|
title: string;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export const Modal: React.FC<ModalProps> = ({ isOpen, onClose, onConfirm, title, children }) => {
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex justify-center items-center">
|
|
<div className="bg-white rounded-lg shadow-xl p-6 w-full max-w-md">
|
|
<h2 className="text-xl font-bold text-slate-800 mb-4">{title}</h2>
|
|
<div className="text-slate-600 mb-6">{children}</div>
|
|
<div className="flex justify-end gap-4">
|
|
<button
|
|
onClick={onClose}
|
|
className="px-4 py-2 text-sm font-semibold text-slate-700 bg-slate-100 border border-slate-300 rounded-md hover:bg-slate-200 focus:outline-none focus:ring-2 focus:ring-slate-400"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
onClick={onConfirm}
|
|
className="px-4 py-2 text-sm font-semibold text-white bg-red-600 border border-red-700 rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500"
|
|
>
|
|
Yes, clear
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|