// title: Server health monitoring with CPU and memory progress bars import { Badge } from "@/registry/default/ui/badge"; import { Progress } from "@/registry/default/ui/progress"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/registry/default/ui/table"; const servers = [ { cpu: 42, memory: 61, name: "web-prod-01", region: "us-east-1", status: "Healthy", statusVariant: "success" as const, uptime: "99.98%", }, { cpu: 38, memory: 55, name: "web-prod-02", region: "us-east-1", status: "Healthy", statusVariant: "success" as const, uptime: "99.98%", }, { cpu: 87, memory: 79, name: "api-prod-01", region: "us-west-2", status: "Warning", statusVariant: "warning" as const, uptime: "99.81%", }, { cpu: 23, memory: 68, name: "db-primary", region: "eu-west-1", status: "Healthy", statusVariant: "success" as const, uptime: "99.99%", }, { cpu: 96, memory: 91, name: "worker-01", region: "ap-east-1", status: "Critical", statusVariant: "destructive" as const, uptime: "97.23%", }, { cpu: 14, memory: 33, name: "cache-01", region: "us-east-1", status: "Healthy", statusVariant: "success" as const, uptime: "100%", }, ]; export function Pattern() { return (

Server Region Status CPU Memory Uptime {servers.map((s) => ( {s.name} {s.region} {s.status}

{s.cpu}%

{s.memory}%

{s.uptime} ))}

); }