/ frontend / src / components / ui / NodeStatus.tsx
NodeStatus.tsx
 1  import { cn } from '@/lib/utils'
 2  
 3  interface NodeStatusProps {
 4    service: string | null | undefined
 5    /** true = API responded, false = API down, undefined = not applicable (prover) */
 6    apiUp?: boolean
 7    className?: string
 8  }
 9  
10  export function NodeStatus({ service, apiUp, className }: NodeStatusProps) {
11    // Systemd / service line
12    const active = service === 'active'
13    const noSystemd = service === 'running-nosystemd'
14  
15    const serviceLabel = active ? 'systemd ✓' : noSystemd ? 'no systemd' : (service ?? 'unknown')
16    const serviceColor = active
17      ? 'text-[#3fb950]'
18      : noSystemd
19      ? 'text-[#d29922]'
20      : service === 'offline' || service === 'unknown' || !service
21      ? 'text-[#6e7681]'
22      : 'text-[#f85149]'
23  
24    // API line (validators only — undefined means skip)
25    const apiLabel = apiUp === true ? 'api ✓' : apiUp === false ? 'api ✗' : null
26    const apiColor = apiUp === true ? 'text-[#3fb950]' : 'text-[#f85149]'
27  
28    return (
29      <div className={cn('flex flex-col gap-0.5', className)}>
30        <span className={cn('font-medium text-xs', serviceColor)}>{serviceLabel}</span>
31        {apiLabel !== null && (
32          <span className={cn('font-medium text-xs', apiColor)}>{apiLabel}</span>
33        )}
34      </div>
35    )
36  }