Status Grid

1import * as React from 'react'
2import { cn } from '@/lib/utils'
3 
4export type SystemStatus = 'ACTIVE' | 'OFFLINE' | 'WARNING' | 'CRITICAL' | 'SCANNING'
5 
6export interface SystemEntry {
7  name:    string
8  status:  SystemStatus
9  /** Optional secondary text shown beside the name */
10  detail?: string
11}
12 
13export interface StatusGridProps extends React.HTMLAttributes<HTMLDivElement> {
14  systems:  SystemEntry[]
15  title?:   string
16  columns?: 1 | 2 | 3
17}
18 
19function statusColor(s: SystemStatus): string {
20  switch (s) {
21    case 'ACTIVE':   return 'var(--color-green)'
22    case 'OFFLINE':  return 'var(--text-muted)'
23    case 'WARNING':  return 'var(--color-amber)'
24    case 'CRITICAL': return 'var(--color-red)'
25    case 'SCANNING': return 'var(--color-green)'
26  }
27}
28 
29function statusGlow(s: SystemStatus): string {
30  switch (s) {
31    case 'ACTIVE':   return 'var(--glow-green)'
32    case 'SCANNING': return 'var(--glow-green)'
33    case 'WARNING':  return 'var(--glow-amber)'
34    case 'CRITICAL': return 'var(--glow-red)'
35    default:         return 'none'
36  }
37}
38 
39const StatusGrid = React.forwardRef<HTMLDivElement, StatusGridProps>(
40  ({ className, systems, title, columns = 1, style, ...props }, ref) => {
41    return (
42      <div
43        ref={ref}
44        className={cn(className)}
45        style={{
46          border:     '1px solid var(--border)',
47          background: 'var(--surface)',
48          fontFamily: 'var(--font-mono)',
49          overflow:   'hidden',
50          ...style,
51        }}
52        {...props}
53      >
54        {/* Header */}
55        {title && (
56          <div
57            style={{
58              padding:       '0.4rem 0.75rem',
59              borderBottom:  '1px solid var(--border)',
60              background:    'var(--surface-raised)',
61              fontSize:      '0.6rem',
62              color:         'var(--text-muted)',
63              letterSpacing: '0.12em',
64              textTransform: 'uppercase',
65            }}
66          >
67            {title}
68          </div>
69        )}
70 
71        {/* Grid of rows */}
72        <div
73          style={{
74            display:             'grid',
75            gridTemplateColumns: `repeat(${columns}, 1fr)`,
76          }}
77        >
78          {systems.map((system, i) => {
79            const color      = statusColor(system.status)
80            const glow       = statusGlow(system.status)
81            const isScanning = system.status === 'SCANNING'
82 
83            // border logic: no bottom border on last row(s), no right on last column
84// … truncated