Live Status Indicators

1'use client'
2 
3import { cn } from '#/lib/utils.ts'
4import type { ServiceStatus } from './columns'
5 
6const STATUS_CONFIG: Record<
7  ServiceStatus,
8  { label: string; dot: string; pulse: boolean }
9> = {
10  operational: { label: 'Operational', dot: 'bg-emerald-500', pulse: true },
11  degraded: { label: 'Degraded', dot: 'bg-amber-500', pulse: true },
12  down: { label: 'Down', dot: 'bg-red-500', pulse: false },
13}
14 
15export function StatusIndicator({ status }: { status: ServiceStatus }) {
16  const config = STATUS_CONFIG[status]
17 
18  return (
19    <span className="inline-flex items-center gap-2 text-sm">
20      <span className="relative flex size-2.5">
21        {config.pulse && (
22          <span
23            className={cn(
24              'absolute inline-flex h-full w-full animate-ping rounded-full opacity-75',
25              config.dot,
26            )}
27          />
28        )}
29        <span
30          className={cn('relative inline-flex size-2.5 rounded-full', config.dot)}
31        />
32      </span>
33      {config.label}
34    </span>
35  )
36}