Status Bar
Connection Indicator
Round status dot — green (online), orange (warning / degraded), or red (offline). Drive it from your own health-check loop via status (or the legacyconnected boolean). Passdetails to reveal extra info on hover (e.g. ping, time since last update).
Preview
Three states; hover the first to see the details tooltip.
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 type ConnectionStatus = 'online' | 'warning' | 'offline'
export interface ConnectionIndicatorProps {
status?: ConnectionStatus | null // takes precedence; null renders nothing
connected?: boolean | null // back-compat: true -> online, false -> offline
onlineLabel?: string
warningLabel?: string
offlineLabel?: string
details?: React.ReactNode // optional hover-tooltip content
className?: string
}
// Round status dot: green (online) / orange (warning) / red (offline).
// Pass `details` to reveal extra info (ping, last-update ms) on hover.Props
| Prop | Type |
|---|---|
| status | 'online' | 'warning' | 'offline' | null |
| connected | boolean | null |
| onlineLabel | string |
| warningLabel | string |
| offlineLabel | string |
| details | React.ReactNode |
| className | string |