offline OfflineIndicator.tsx

76.92% Statements 20/26

60.86% Branches 14/23

83.33% Functions 5/6

82.6% Lines 19/23

Press n or j to go to the next uncovered block, b, p or k for the previous block.


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  
38x
 
38x
 
376x
376x
376x
314x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { useOfflineState } from '@/lib/useOfflineState'
 
export function OfflineIndicator() {
  const state = useOfflineState()
 
  if (state.isOnline && state.pendingCount === 0 && !state.lastSynced) return null
 
  return (
    <div role="status" aria-label="offline-indicator" className="flex items-center gap-2 text-xs text-muted-foreground">
      {!state.isOnline && (
        <span className="rounded-md bg-destructive/10 px-2 py-1 text-center text-xs text-destructive" data-testid="offline-banner">
          Offline
        </span>
      )}
      {state.pendingCount > 0 && (
        <span className="rounded-md bg-amber-100 px-2 py-1 text-xs text-amber-900 dark:bg-amber-900/30 dark:text-amber-300" data-testid="pending-count">
          {state.pendingCount} pending
        </span>
      )}
      {state.lastSynced && (
        <span className="rounded-md bg-emerald-100 px-2 py-1 text-xs text-emerald-900 dark:bg-emerald-900/30 dark:text-emerald-300" data-testid="last-synced">
          Last synced: {state.lastSynced.toLocaleTimeString()}
        </span>
      )}
    </div>
  )
}