Spaces:
Sleeping
Sleeping
| // components/ui.jsx — shared reusable UI primitives | |
| export function StatusBadge({ status }) { | |
| const map = { | |
| SAFE: 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30', | |
| LOW: 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30', | |
| MEDIUM: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30', | |
| HIGH: 'bg-orange-500/20 text-orange-400 border-orange-500/30', | |
| CRITICAL: 'bg-red-500/20 text-red-400 border-red-500/30', | |
| CONNECTED: 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30', | |
| DISCONNECTED: 'bg-red-500/20 text-red-400 border-red-500/30', | |
| CONNECTING: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30', | |
| ACTIVE: 'bg-blue-500/20 text-blue-400 border-blue-500/30', | |
| INACTIVE: 'bg-slate-500/20 text-slate-400 border-slate-500/30', | |
| EXECUTED: 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30', | |
| REJECTED: 'bg-red-500/20 text-red-400 border-red-500/30', | |
| UNAVAILABLE: 'bg-slate-500/20 text-slate-400 border-slate-500/30', | |
| APPROVED: 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30', | |
| running: 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30', | |
| stopped: 'bg-slate-500/20 text-slate-400 border-slate-500/30', | |
| error: 'bg-red-500/20 text-red-400 border-red-500/30', | |
| } | |
| const cls = map[status] ?? 'bg-slate-500/20 text-slate-400 border-slate-500/30' | |
| return ( | |
| <span className={`inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-medium ${cls}`}> | |
| {status} | |
| </span> | |
| ) | |
| } | |
| export function MetricCard({ label, value, sub, icon: Icon, accent = 'blue' }) { | |
| const accents = { | |
| blue: 'border-cyan-400/25 bg-cyan-400/8 text-cyan-300', | |
| green: 'border-emerald-400/25 bg-emerald-400/8 text-emerald-300', | |
| yellow: 'border-amber-400/25 bg-amber-400/8 text-amber-300', | |
| red: 'border-rose-400/25 bg-rose-400/8 text-rose-300', | |
| purple: 'border-violet-400/25 bg-violet-400/8 text-violet-300', | |
| } | |
| return ( | |
| <div className={`group rounded-lg border p-4 shadow-lg shadow-slate-950/20 backdrop-blur ${accents[accent] ?? accents.blue}`}> | |
| <div className="flex items-start justify-between gap-3"> | |
| <div className="min-w-0"> | |
| <p className="mb-1 text-[11px] font-semibold uppercase text-slate-400">{label}</p> | |
| <p className="break-words text-2xl font-bold leading-tight text-white">{value ?? '—'}</p> | |
| {sub && <p className="mt-1 text-xs text-slate-500">{sub}</p>} | |
| </div> | |
| {Icon && ( | |
| <div className="rounded-md border border-white/10 bg-white/5 p-2 text-current"> | |
| <Icon className="h-4 w-4" /> | |
| </div> | |
| )} | |
| </div> | |
| </div> | |
| ) | |
| } | |
| export function Card({ title, children, className = '' }) { | |
| return ( | |
| <section className={`rounded-lg border border-slate-700/60 bg-slate-900/70 shadow-xl shadow-slate-950/20 backdrop-blur ${className}`}> | |
| {title && ( | |
| <div className="border-b border-slate-700/50 px-4 py-3"> | |
| <h3 className="text-sm font-semibold text-slate-100">{title}</h3> | |
| </div> | |
| )} | |
| <div className="p-4">{children}</div> | |
| </section> | |
| ) | |
| } | |
| export function LoadingState({ message = 'Loading...' }) { | |
| return ( | |
| <div className="flex items-center justify-center h-40 text-slate-400 text-sm"> | |
| <div className="flex items-center gap-2"> | |
| <div className="w-4 h-4 border-2 border-slate-600 border-t-blue-400 rounded-full animate-spin" /> | |
| {message} | |
| </div> | |
| </div> | |
| ) | |
| } | |
| export function EmptyState({ message = 'No data available' }) { | |
| return ( | |
| <div className="flex items-center justify-center h-32 text-slate-500 text-sm"> | |
| {message} | |
| </div> | |
| ) | |
| } | |
| export function ErrorState({ message = 'Backend unavailable. Trying to reconnect...' }) { | |
| return ( | |
| <div className="flex items-center justify-center h-32 text-red-400 text-sm"> | |
| <div className="text-center"> | |
| <p className="font-medium">Connection Error</p> | |
| <p className="text-slate-500 mt-1">{message}</p> | |
| </div> | |
| </div> | |
| ) | |
| } | |
| export function CheckRow({ label, value }) { | |
| const ok = value === true | |
| const na = value === undefined || value === null | |
| return ( | |
| <div className="flex items-center justify-between py-1.5 border-b border-slate-700/30 last:border-0"> | |
| <span className="text-sm text-slate-300">{label}</span> | |
| {na ? ( | |
| <span className="text-xs text-slate-500">—</span> | |
| ) : ok ? ( | |
| <span className="text-xs text-emerald-400 font-medium">✓ PASS</span> | |
| ) : ( | |
| <span className="text-xs text-red-400 font-medium">✗ FAIL</span> | |
| )} | |
| </div> | |
| ) | |
| } | |
| export function DataSourceTag({ source }) { | |
| return ( | |
| <span className="text-xs text-slate-500 bg-slate-700/50 px-2 py-0.5 rounded"> | |
| Source: {source} | |
| </span> | |
| ) | |
| } | |