40 lines
1.5 KiB
JavaScript
40 lines
1.5 KiB
JavaScript
const DirtyNavigationDialog = ({ open, message, onSave, onDiscard, onCancel, saving }) => {
|
|
if (!open) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/60 px-4">
|
|
<div className="bg-white rounded-lg shadow-2xl max-w-md w-full p-6">
|
|
<h3 className="text-lg font-semibold text-gray-800 mb-2">Änderungen nicht gespeichert</h3>
|
|
<p className="text-sm text-gray-600 mb-4">
|
|
{message || 'Es gibt ungespeicherte Änderungen. Wie möchtest du fortfahren?'}
|
|
</p>
|
|
<div className="flex flex-col gap-2">
|
|
<button
|
|
onClick={onSave}
|
|
disabled={saving}
|
|
className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-70"
|
|
>
|
|
{saving ? 'Speichere...' : 'Speichern & fortfahren'}
|
|
</button>
|
|
<button
|
|
onClick={onDiscard}
|
|
className="bg-white border border-gray-300 hover:bg-gray-50 text-gray-800 px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-gray-400"
|
|
>
|
|
Ohne Speichern fortfahren
|
|
</button>
|
|
<button
|
|
onClick={onCancel}
|
|
className="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded focus:outline-none focus:ring-2 focus:ring-gray-300"
|
|
>
|
|
Abbrechen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DirtyNavigationDialog;
|