ConnectionStatus
A status indicator component showing real-time connection status to backend services.
π Overviewβ
| Property | Value |
|---|---|
| File | src/components/ConnectionStatus.tsx |
| Type | React Functional Component |
| Author | UIP Team |
| Version | 1.0.0 |
π― Purposeβ
- Display WebSocket connection status
- Show API connectivity state
- Indicate data freshness
- Auto-reconnection feedback
π Usageβ
import { ConnectionStatus } from '@/components/ConnectionStatus';
function Header() {
return (
<header>
<ConnectionStatus />
</header>
);
}
π¦ Propsβ
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
showLabel | boolean | No | true | Show status text |
size | 'sm' | 'md' | 'lg' | No | 'md' | Indicator size |
position | 'inline' | 'fixed' | No | 'inline' | Display position |
π¨ Status Indicatorsβ
| Status | Color | Label |
|---|---|---|
| Connected | π’ Green | Connected |
| Connecting | π‘ Yellow | Connecting... |
| Disconnected | π΄ Red | Disconnected |
| Reconnecting | π Orange | Reconnecting... |
π Related Componentsβ
- Sidebar - App navigation
- NotificationProvider - Notifications
See the complete components reference for all available components.