46 lines
1.5 KiB
JavaScript
46 lines
1.5 KiB
JavaScript
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;
|