refactoring node 24

src/components/DirtyNavigationDialog.js

@@ -0,0 +1,39 @@
+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;