Status Monitor Demo

1import StatusMonitor, {
2  type AppStatusData
3} from "@/registry/8starlabs-ui/blocks/status-monitor";
4 
5const startDate = Date.UTC(2026, 3, 1);
6const dayInMilliseconds = 24 * 60 * 60 * 1000;
7 
8const statuses: AppStatusData[] = Array.from({ length: 90 }, (_, index) => {
9  const day = index + 1;
10  const timestamp = new Date(startDate + index * dayInMilliseconds);
11 
12  if (day === 44 || day === 72) {
13    return {
14      status: "error",
15      timestamp,
16      info: "API availability dropped while failover completed."
17    };
18  }
19 
20  if (day % 17 === 0 || day % 29 === 0) {
21    return {
22      status: "warning",
23      timestamp,
24      info: "Latency was elevated, but requests continued to complete."
25    };
26  }
27 
28  return {
29    status: "normal",
30    timestamp,
31    info: "All checks completed within the expected threshold."
32  };
33});
34 
35export default function StatusMonitorDemo() {
36  return <StatusMonitor statuses={statuses} title="API Status" />;
37}