Status Monitor Hours Demo

1import StatusMonitor, {
2  type AppStatusData
3} from "@/registry/8starlabs-ui/blocks/status-monitor";
4 
5const startTime = Date.UTC(2026, 6, 10, 0, 0, 0);
6const hourInMilliseconds = 60 * 60 * 1000;
7 
8const statuses: AppStatusData[] = Array.from({ length: 90 }, (_, index) => {
9  const hour = index + 1;
10  const timestamp = new Date(startTime + index * hourInMilliseconds);
11 
12  if (hour >= 54 && hour <= 56) {
13    return {
14      status: "error",
15      timestamp,
16      info: "Checkout requests failed during a payment provider outage."
17    };
18  }
19 
20  if ((hour >= 34 && hour <= 38) || hour === 76) {
21    return {
22      status: "warning",
23      timestamp,
24      info: "Queue depth increased while background jobs caught up."
25    };
26  }
27 
28  return {
29    status: "normal",
30    timestamp,
31    info: "No active incidents were detected for this hour."
32  };
33});
34 
35export default function StatusMonitorHoursDemo() {
36  return (
37    <StatusMonitor statuses={statuses} unit="hours" title="Checkout Health" />
38  );
39}