All files / layers / L2R / offline OfflineIndicator.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
37x
 
 
168x
6x
 
 
173x
 
9x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import type { OfflineState } from '../../interfaces'
 
export interface OfflineIndicatorProps {
  state: OfflineState
}
 
export function OfflineIndicator({ state }: OfflineIndicatorProps) {
  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>
  )
}