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.
3.1 kB · 133 lines
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134import type { Tracker } from "@openstatus/tracker";
import { cn } from "../../../../lib/utils";
export function StatusCheck({ tracker }: { tracker: Tracker }) { const details = tracker.currentDetails;
// FIXME: move icons into @openstatus/tracker lib function getVariant() { switch (details.variant) { case "maintenance": return Hammer; case "down": return Minus; case "degraded": return Minus; case "incident": return Alert; default: return Check; } }
// REMINDER: we cannot use custom tailwind utility colors like `bg-status-operational/90` here function getClassName() { switch (details.variant) { case "maintenance": return "bg-blue-500/90 border-blue-500"; case "down": return "bg-rose-500/90 border-rose-500"; case "degraded": return "bg-amber-500/90 border-amber-500"; case "incident": return "bg-rose-500/90 border-rose-500"; default: return "bg-green-500/90 border-green-500"; } }
const Icon = getVariant();
return ( <div tw="flex flex-col justify-center items-center w-full"> <div tw={cn( "mb-2 flex rounded-full border-2 p-3 text-white", getClassName(), )} > <Icon /> </div> <p style={{ fontFamily: "Cal" }} tw="text-4xl"> {details.long} </p> </div> );}
function Hammer() { return ( <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" > <path d="m15 12-8.373 8.373a1 1 0 1 1-3-3L12 9" /> <path d="m18 15 4-4" /> <path d="m21.5 11.5-1.914-1.914A2 2 0 0 1 19 8.172V7l-2.26-2.26a6 6 0 0 0-4.202-1.756L9 2.96l.92.82A6.18 6.18 0 0 1 12 8.4V10l2 2h1.172a2 2 0 0 1 1.414.586L18.5 14.5" /> </svg> );}
function Check() { return ( <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" > <path d="M20 6 9 17l-5-5" /> </svg> );}
function Minus() { return ( <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" > <path d="M5 12h14" /> </svg> );}
function Alert() { return ( <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" > <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" /> <path d="M12 9v4" /> <path d="M12 17h.01" /> </svg> );}