Status Bar

Connection Indicator

Tiny round status dot — green wifi when connected, red when offline. Driveconnected from your own health-check loop; it renders nothing until the first result.

Preview

Fullscreen

Source

Copy this file to components/status/connection-indicator.tsx

tsx

'use client'

import * as React from 'react'
import { Wifi, WifiOff } from 'lucide-react'
import { cn } from '@/lib/utils'

export interface ConnectionIndicatorProps {
  connected?: boolean | null
  onlineLabel?: string
  offlineLabel?: string
  className?: string
}

// Tiny round dot: green wifi when connected, red when offline.
// Renders nothing while connected is null (before first check).

Props

Prop	Type	Default	Description
connected	boolean \| null	—	Connection state. null renders nothing.
onlineLabel	string	'Connected'	Tooltip when connected
offlineLabel	string	'Offline'	Tooltip when disconnected
className	string	—	Additional CSS classes