Spaces:
Sleeping
Sleeping
| "use client"; | |
| import { Badge, Button } from "@/components/ui"; | |
| import { formatDuration } from "@/lib/format"; | |
| import type { ConnectionStatus } from "@/types/connection"; | |
| export interface TrackingControlsProps { | |
| isTracking: boolean; | |
| canStart: boolean; | |
| starting: boolean; | |
| onStart: () => void; | |
| onStop: () => void; | |
| syncIntervalMs: number; | |
| connectionStatus: ConnectionStatus; | |
| queueCount: number; | |
| } | |
| const STATUS_LABEL: Record<ConnectionStatus, string> = { | |
| online: "Connected", | |
| offline: "Offline", | |
| syncing: "Syncing", | |
| }; | |
| const STATUS_VARIANT = { | |
| online: "success", | |
| offline: "danger", | |
| syncing: "warning", | |
| } as const; | |
| export function TrackingControls({ | |
| isTracking, | |
| canStart, | |
| starting, | |
| onStart, | |
| onStop, | |
| syncIntervalMs, | |
| connectionStatus, | |
| queueCount, | |
| }: TrackingControlsProps) { | |
| return ( | |
| <div className="flex flex-wrap items-center justify-between gap-4"> | |
| <div className="flex items-center gap-3"> | |
| {isTracking ? ( | |
| <Button variant="danger" onClick={onStop}> | |
| Stop tracking | |
| </Button> | |
| ) : ( | |
| <Button variant="primary" onClick={onStart} disabled={!canStart} loading={starting}> | |
| Start tracking | |
| </Button> | |
| )} | |
| {/* The interval is interpolated. The previous version rendered a template | |
| literal that said "Log interval custom" with nothing substituted in. */} | |
| <p className="text-content-muted text-xs"> | |
| {isTracking | |
| ? `Logging one entry every ${formatDuration(syncIntervalMs / 1000)}` | |
| : "Tracking is stopped"} | |
| </p> | |
| </div> | |
| <div className="flex items-center gap-2"> | |
| <Badge variant={STATUS_VARIANT[connectionStatus]}>{STATUS_LABEL[connectionStatus]}</Badge> | |
| {queueCount > 0 && <Badge variant="warning">{queueCount} queued</Badge>} | |
| </div> | |
| </div> | |
| ); | |
| } | |