refactoring node 24

src/components/StoreSyncOverlay.js

@@ -0,0 +1,45 @@
+const formatEta = (seconds) => {
+  if (seconds == null || seconds === Infinity) {
+    return null;
+  }
+  const clamped = Math.max(0, seconds);
+  const mins = Math.floor(clamped / 60);
+  const secs = clamped % 60;
+  if (mins > 0) {
+    return `${mins}m ${secs.toString().padStart(2, '0')}s`;
+  }
+  return `${secs}s`;
+};
+
+const StoreSyncOverlay = ({ state }) => {
+  if (!state?.active) {
+    return null;
+  }
+
+  const percent = Math.round(state.percent || 0);
+  const backgroundColor = state.block ? 'rgba(255,255,255,0.95)' : 'rgba(15,23,42,0.4)';
+  const etaLabel = formatEta(state.etaSeconds);
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center px-4" style={{ backgroundColor }}>
+      <div className="bg-white shadow-2xl rounded-lg p-6 w-full max-w-md">
+        <p className="text-gray-800 font-semibold mb-3">{state.message || 'Synchronisiere...'}</p>
+        <div className="w-full bg-gray-200 rounded-full h-3 overflow-hidden">
+          <div
+            className="h-3 bg-blue-600 transition-all duration-300 ease-out"
+            style={{ width: `${percent}%` }}
+          />
+        </div>
+        <div className="flex items-center justify-between mt-2 text-sm text-gray-500">
+          <span>{percent}%</span>
+          <span>{etaLabel ? `ETA ~ ${etaLabel}` : 'Bitte warten...'}</span>
+        </div>
+        <p className="text-xs text-gray-400 mt-2">
+          Die Verzögerung schützt vor Rate-Limits während die Betriebe geprüft werden.
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default StoreSyncOverlay;