blob: c8e21eaf7f0ee5a6b51f545066e21530e3457149 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
import { useState, useEffect } from "react";
import { Download, X } from "lucide-react";
import { swManager } from "../utils/serviceWorkerManager";
import "./UpdateNotification.css";
export function UpdateNotification() {
const [showUpdate, setShowUpdate] = useState(false);
const [isUpdating, setIsUpdating] = useState(false);
useEffect(() => {
swManager.onUpdate(() => {
setShowUpdate(true);
});
}, []);
const handleUpdate = async () => {
setIsUpdating(true);
swManager.activateUpdate();
// Wait for the page to reload
setTimeout(() => {
window.location.reload();
}, 500);
};
const handleDismiss = () => {
setShowUpdate(false);
};
if (!showUpdate) return null;
return (
<div className="update-notification">
<div className="update-content">
<div className="update-icon">
<Download size={20} />
</div>
<div className="update-text">
<div className="update-title">Nueva versión disponible</div>
<div className="update-description">
Actualiza para obtener las últimas mejoras
</div>
</div>
<div className="update-actions">
<button
className="update-button"
onClick={handleUpdate}
disabled={isUpdating}
>
{isUpdating ? "Actualizando..." : "Actualizar"}
</button>
<button
className="update-dismiss"
onClick={handleDismiss}
aria-label="Cerrar notificación"
>
<X size={16} />
</button>
</div>
</div>
</div>
);
}
|
