Status bar

import { StatusBar } from "@/components/ui/status-bar"

export function UptimeBar() {
  const status = (index: number) => (index === 7 ? "outage" : index === 18 || index === 19 ? "degraded" : "operational") as "outage" | "degraded" | "operational";
  return (
    <div className="w-full max-w-xl">
      <StatusBar
        label="API uptime, last 30 days"
        startLabel="30 days ago"
        endLabel="Today"
        data={Array.from({ length: 30 }, (_, index) => ({ id: `d${index}`, label: `Day ${index + 1}`, status: status(index) }))}
      />
    </div>
  );
}