PremiumNew

StatusBoard

Service status board with health indicators, uptime percentages, and response times

Data Displaystatusmonitoringhealthuptime

Dependencies

shadcn/ui components needed:

npx shadcn@latest add cardnpx shadcn@latest add badgenpx shadcn@latest add separator

How to use this component

Copy the code below into your project. Make sure you have the required shadcn/ui dependencies installed. Then import and use the component in your pages or layouts.

Code

1"use client"
2
3import * as React from "react"
4import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
5import { Badge } from "@/components/ui/badge"
6import { Separator } from "@/components/ui/separator"
7import { cn } from "@/lib/utils"
8
9interface StatusBoardProps {
10  className?: string
11}
12
13interface Service {
14  name: string
15  status: "operational" | "degraded" | "outage"
16  uptime: string
17  responseTime: string
18}
19
20const services: Service[] = [
21  { name: "API", status: "operational", uptime: "99.99%", responseTime: "45ms" },
22  { name: "Web App", status: "operational", uptime: "99.98%", responseTime: "120ms" },
23  { name: "Database", status: "operational", uptime: "99.99%", responseTime: "8ms" },
24  { name: "CDN", status: "degraded", uptime: "99.85%", responseTime: "280ms" },
25  { name: "Auth Service", status: "operational", uptime: "99.97%", responseTime: "65ms" },
26  { name: "Search", status: "operational", uptime: "99.95%", responseTime: "95ms" },
27  { name: "Payments", status: "operational", uptime: "100.00%", responseTime: "180ms" },
28  { name: "Email", status: "operational", uptime: "99.92%", responseTime: "320ms" },
29]
30
31const statusConfig = {
32  operational: {
33    dot: "bg-emerald-500",
34    text: "text-emerald-600",
35    label: "Operational",
36  },
37  degraded: {
38    dot: "bg-amber-500",
39    text: "text-amber-600",
40    label: "Degraded",
41  },
42  outage: {
43    dot: "bg-red-500",
44    text: "text-red-600",
45    label: "Outage",
46  },
47}
48
49export function StatusBoard({ className }: StatusBoardProps) {
50  const allOperational = services.every(s => s.status === "operational")
51
52  return (
53    <Card className={cn("w-full max-w-2xl", className)}>
54      <CardHeader>
55        <div className="flex items-center justify-between">
56          <CardTitle>System Status</CardTitle>
57          <Badge className={cn(allOperational ? "bg-emerald-500/10 text-emerald-600 border-emerald-200" : "bg-amber-500/10 text-amber-600 border-amber-200")}>
58            {allOperational ? "All Systems Operational" : "Some Issues Detected"}
59          </Badge>
60        </div>
61      </CardHeader>
62      <CardContent>
63        <div className="space-y-0">
64          {services.map((service, i) => {
65            const config = statusConfig[service.status]
66            return (
67              <React.Fragment key={service.name}>
68                <div className="flex items-center justify-between py-3">
69                  <div className="flex items-center gap-3 flex-1">
70                    <div className={cn("w-2.5 h-2.5 rounded-full", config.dot)} />
71                    <span className="font-medium text-sm">{service.name}</span>
72                    <span className={cn("text-xs", config.text)}>{config.label}</span>
73                  </div>
74                  <div className="flex items-center gap-6 text-sm">
75                    <span className="text-muted-foreground font-mono">{service.uptime}</span>
76                    <span className="text-muted-foreground font-mono w-16 text-right">{service.responseTime}</span>
77                  </div>
78                </div>
79                {i < services.length - 1 && <Separator />}
80              </React.Fragment>
81            )
82          })}
83        </div>
84        <div className="mt-6 pt-4 border-t">
85          <p className="text-xs text-muted-foreground">Last checked: 2 minutes ago</p>
86        </div>
87      </CardContent>
88    </Card>
89  )
90}