HealthCard

1"use client";
2 
3import { Alert02Icon } from "@hugeicons/core-free-icons";
4import { HugeiconsIcon } from "@hugeicons/react";
5import type { ComponentProps } from "react";
6 
7import { NeonLoader } from "@/components/neon-loader/neon-loader";
8import { Skeleton } from "@/components/ui/skeleton";
9import { cn } from "@/lib/utils";
10 
11/** Operational health of a surface, worst-first: down > degraded > maintenance > healthy. */
12export type HealthStatus = "healthy" | "degraded" | "maintenance" | "down";
13 
14export interface HealthSignal {
15  /** Short mono caption, e.g. "Latency p99". */
16  label: string;
17  /** Preformatted figure, e.g. "128 ms" or "99.98%". */
18  value: string;
19  /** Optional tint for this signal's dot; omit for no color. */
20  status?: HealthStatus;
21}
22 
23/* ─────────────────────────────────────────────────────────
24 * HEALTH ROLLUP, on the MetricCard shell
25 *
26 *  The overall status is the light: a faint status-tinted
27 *  grain wash rises from the bottom edge and a mono pill
28 *  names it,
29 *  both drawn from the house status vocabulary — active
30 *  green, scaling amber, sleeping gray, destructive red.
31 *  Beneath, the supporting signals (latency, errors, uptime)
32 *  read as a quiet mono grid; a signal only takes color when
33 *  it is the reason the rollup is not green. Text stays
34 *  muted so a wall of cards reads calm. No motion.
35 * ───────────────────────────────────────────────────────── */
36const STATUS_DOT: Record<HealthStatus, string> = {
37  degraded: "bg-[var(--status-scaling)]",
38  down: "bg-destructive",
39  healthy: "bg-[var(--status-active)]",
40  maintenance: "bg-[var(--status-sleeping)]",
41};
42 
43/** Wash tint: set as text color so neon-card-wash reads `currentColor`. */
44const STATUS_TINT: Record<HealthStatus, string> = {
45  degraded: "text-[var(--status-scaling)]",
46  down: "text-destructive",
47  healthy: "text-[var(--status-active)]",
48  maintenance: "text-[var(--status-sleeping)]",
49};
50 
51const STATUS_LABEL: Record<HealthStatus, string> = {
52  degraded: "degraded",
53  down: "down",
54  healthy: "healthy",
55  maintenance: "maintenance",
56};
57 
58const HealthBadge = ({
59  status,
60  label,
61}: {
62  status: HealthStatus;
63  label?: string;
64}) => (
65  <span
66// … truncated