Public Incident History

npx shadcn add "https://ui.beste.co/r/news42?email=YOUR_EMAIL&license_key=YOUR_KEY"

npx shadcn add "https://ui.beste.co/r-base/news42?email=YOUR_EMAIL&license_key=YOUR_KEY"

import { News42, news42Demo } from "@/components/beste/block/news42";

export default function IncidentsPage() {
  return <News42 {...news42Demo} />;
}

import { Indicator14 } from "@/components/beste/piece/indicator14";
import { News42 } from "@/components/beste/block/news42";

export default function IncidentsPage() {
  return (
    <News42
      badge={{ label: "Incident history" }}
      heading="Everything that has gone wrong, with the date still on it"
      description="We publish incidents whether or not anyone noticed, and we leave them up."
      severityLabels={{ major: "Major", degraded: "Degraded", minor: "Minor" }}
      summary={[
        { value: "4", label: "incidents in the last 12 months" },
        { value: "99.97%", label: "availability across the year" },
      ]}
      incidents={[
        {
          date: "24 April 2026",
          title: "Slow booking pages in the UK region",
          severity: "degraded",
          duration: "41 minutes",
          impact: "The admin app was slow for one region. Member links kept working from cache.",
          fix: "Rolled back the 06:40 deploy and added a query budget to the booking path.",
          href: "/incidents/april-2026",
        },
      ]}
      media={<Indicator14 title="Booking service" uptime="99.97%" range="Last 45 days" />}
      image={{ src: "/backdrops/green.jpg", alt: "Deep green gradient backdrop" }}
      policy="Every incident gets a write-up within 48 hours."
      button={{ label: "Follow the status page", href: "/status" }}
    />
  );
}

type Severity = "major" | "minor" | "degraded";

type ActionLink = {
  label: string;
  href: string;
};

type Incident = {
  date: string;
  title: string;
  severity: Severity;
  duration: string;
  impact: string;
  fix: string;
  href: string;
};

type Summary = {
  value: string;
  label: string;
};