1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

"use client";

import { useOnline } from "@/hooks/useOnline";

export function OfflineBanner() {
  const online = useOnline();
  if (online) return null;
  return (
    <div
      role="status"
      className="fixed bottom-0 inset-x-0 z-50 px-4 py-2 text-sm text-center"
      style={{
        background: "var(--bg-elevated)",
        color: "var(--text)",
        borderTop: "1px solid var(--border-strong)",
      }}
    >
      Offline. Changes are saved locally and will sync when you reconnect.
    </div>
  );
}