Status Bar
Status Bar
Convenience composition of the four status badges: the timezone and investor toggles bottom-left, the server-health pill bottom-center, and the connection dot bottom-right — the layout from the trading dashboards. Drop it once near the root of your app. The preview below uses fixed=false to render inline.
Preview
Load 17% 13% 11%|RAM 12%|HDD 95%|Net 0%|Up 91d
Source
Copy this file to components/status/status-bar.tsx (also copy the four badge components it imports).
tsx
'use client'
import * as React from 'react'
import { cn } from '@/lib/utils'
import { TimezoneToggle, type TimezoneToggleProps } from './timezone-toggle'
import { HideToggle, type HideToggleProps } from './hide-toggle'
import { ServerStats, type ServerStatsData } from './server-stats'
import { ConnectionIndicator } from './connection-indicator'
export interface StatusBarProps {
timezone?: boolean | TimezoneToggleProps
hide?: boolean | HideToggleProps
stats?: ServerStatsData | null
connected?: boolean | null
fixed?: boolean // default true: pin to bottom of viewport
className?: string
}
// Floating bottom bar: timezone + investor toggles bottom-left,
// server-health pill bottom-center, connection dot bottom-right.
// Every piece is optional and individually usable.Props
| Prop | Type |
|---|---|
| timezone | boolean | TimezoneToggleProps |
| hide | boolean | HideToggleProps |
| stats | ServerStatsData | null |
| connected | boolean | null |
| fixed | boolean |
| className | string |