Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/openstatusHQ/openstatus. 🫖 Status page with uptime monitoring & API monitoring as code 🫖 openstatus.dev
bun drizzle-orm monitoring monitoring-as-code nextjs observability on-call open-source shadcn-ui status-page statuspage synthetic-monitoring tinybird turso uptime uptime-checker uptime-monitor
Something went wrong. Try again.
2.0 kB · 67 lines
TSX
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768import { statusDictionary } from "./utils";
export type Status = | "operational" | "degraded_performance" | "partial_outage" | "major_outage" | "under_maintenance" | "unknown" | "incident";
export type StatusResponse = { status: Status };
export async function getStatus( slug: string, baseUrl = process.env.OPENSTATUS_API_URL ?? "https://api.openstatus.dev",): Promise<StatusResponse> { // read at runtime on the server: no NEXT_PUBLIC_ prefix, so deployments // shipping prebuilt images can still point badges at their own API const base = baseUrl.replace(/\/+$/, "") || "https://api.openstatus.dev"; try { const res = await fetch(`${base}/public/status/${slug}`, { cache: "no-cache", });
if (res.ok) { const data = (await res.json()) as StatusResponse; return data; } } catch { // network-level failures (unreachable host, DNS, …) degrade to "unknown" // instead of bubbling a 500 out of the badge routes } return { status: "unknown" };}
export type StatusWidgetProps = { slug: string; href?: string;};
export async function StatusWidget({ slug, href }: StatusWidgetProps) { const { status } = await getStatus(slug);
const { label, color } = statusDictionary[status];
return ( <a className="inline-flex max-w-fit items-center gap-2 rounded-md border border-gray-200 px-3 py-1 text-sm text-gray-700 hover:bg-gray-100 hover:text-black dark:border-gray-800 dark:text-gray-300 dark:hover:bg-gray-900 dark:hover:text-white" href={href || `https://${slug}.openstatus.dev`} target="_blank" rel="noreferrer" > {label} <span className="relative flex h-2 w-2"> {status === "operational" ? ( <span className={`absolute inline-flex h-full w-full animate-ping rounded-full ${color} opacity-75 duration-1000`} /> ) : null} <span className={`relative inline-flex h-2 w-2 rounded-full ${color}`} /> </span> </a> );}