src/client/components/OfflineBanner.tsx


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

import { useSync } from "../stores";

export function OfflineBanner() {
	const { isOnline, pendingCount } = useSync();

	if (isOnline) {
		return null;
	}

	return (
		<div
			data-testid="offline-banner"
			role="status"
			aria-live="polite"
			style={{
				backgroundColor: "#6c757d",
				color: "white",
				padding: "0.5rem 1rem",
				textAlign: "center",
				fontSize: "0.875rem",
				display: "flex",
				alignItems: "center",
				justifyContent: "center",
				gap: "0.5rem",
			}}
		>
			<span aria-hidden="true">⚡</span>
			<span>
				You're offline. Changes will sync when you reconnect.
				{pendingCount > 0 && (
					<span data-testid="offline-pending-count">
						{" "}
						({pendingCount} pending)
					</span>
				)}
			</span>
		</div>
	);
}