blob: bf94908db0bc04b6e5c834377818007531c855b8 (
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
|
import { useSync } from "../stores";
export function OfflineBanner() {
const { isOnline, pendingCount } = useSync();
if (isOnline) {
return null;
}
return (
<output
data-testid="offline-banner"
aria-live="polite"
className="bg-slate text-white py-2 px-4 text-sm flex items-center justify-center gap-2"
>
<svg
className="w-4 h-4 text-warning"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M18.364 5.636a9 9 0 010 12.728m0 0l-2.829-2.829m2.829 2.829L21 21M15.536 8.464a5 5 0 010 7.072m0 0l-2.829-2.829m-4.243 2.829a4.978 4.978 0 01-1.414-2.83m-1.414 5.658a9 9 0 01-2.167-9.238m7.824 2.167a1 1 0 111.414 1.414m-1.414-1.414L3 3m8.293 8.293l1.414 1.414"
/>
</svg>
<span>
You're offline. Changes will sync when you reconnect.
{pendingCount > 0 && (
<span data-testid="offline-pending-count" className="ml-1 opacity-80">
({pendingCount} pending)
</span>
)}
</span>
</output>
);
}
|
