33 lines
914 B
TypeScript
33 lines
914 B
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { useEffect, useState } from "react";
|
||
|
|
|
||
|
|
export function OfflineBanner() {
|
||
|
|
const [online, setOnline] = useState(true);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (typeof navigator === "undefined") return;
|
||
|
|
setOnline(navigator.onLine);
|
||
|
|
const on = () => setOnline(true);
|
||
|
|
const off = () => setOnline(false);
|
||
|
|
window.addEventListener("online", on);
|
||
|
|
window.addEventListener("offline", off);
|
||
|
|
return () => {
|
||
|
|
window.removeEventListener("online", on);
|
||
|
|
window.removeEventListener("offline", off);
|
||
|
|
};
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
if (online) return null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
role="status"
|
||
|
|
aria-live="polite"
|
||
|
|
className="sticky top-0 z-30 w-full bg-amber-500/20 border-b border-amber-500/30 text-amber-200 text-xs sm:text-sm px-3 py-1.5 text-center backdrop-blur"
|
||
|
|
>
|
||
|
|
You're offline — showing cached data. Live updates will resume automatically.
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|