// title: System status dots revealing service name, uptime, and latency import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/registry/default/ui/tooltip"; type ServiceStatus = "operational" | "degraded" | "down"; type Service = { name: string; uptime: string; latency: string; status: ServiceStatus; }; const services: Service[] = [ { latency: "12 ms", name: "API Gateway", status: "operational", uptime: "99.99%", }, { latency: "8 ms", name: "Auth Service", status: "operational", uptime: "99.97%", }, { latency: "340 ms", name: "Image CDN", status: "degraded", uptime: "98.12%", }, { latency: "22 ms", name: "Database", status: "operational", uptime: "99.95%", }, { latency: "—", name: "Email Worker", status: "down", uptime: "94.60%" }, { latency: "18 ms", name: "Search Index", status: "operational", uptime: "99.90%", }, ]; const dotClass: Record = { degraded: "bg-warning", down: "bg-destructive", operational: "bg-success", }; const statusLabel: Record = { degraded: "Degraded", down: "Down", operational: "Operational", }; export function Pattern() { return (

Services

{services.map(({ name, uptime, latency, status }) => (

{name}

{statusLabel[status]}

Uptime {uptime}

Latency {latency}

))}

); }