Banner Live API Health

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/banner/banner33.tsx instead.

Usage

The file also exports banner33Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Banner33, banner33Demo } from "@/components/blocks/banner/banner33";

export default function Page() {
  return <Banner33 {...banner33Demo} />;
}

Props

Types

type ServiceHealth = {
  name: string;
  status: "operational" | "degraded" | "outage";
};

Behavior notes

• Each service gets its own flat dot and label rather than a bordered chip, keeping the row lightweight even with five or six services listed inline.
• The timestamp is a static string rather than something computed at render, since computing relative time during render produces different output on the server and the client and breaks hydration.
• The status page link stays a plain inline link rather than a button, since the strip's real content is the service list, not a call to action.

Frequently asked questions