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.
1.8 kB · 54 lines
TSX
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455import { Tracker as OSTracker, classNames } from "@openstatus/tracker";
import type { ResponseStatusTracker } from "../../../../lib/tb";import { cn, formatDate } from "../../../../lib/utils";
interface TrackerProps { data: ResponseStatusTracker[];}
export function Tracker({ data }: TrackerProps) { const tracker = new OSTracker({ data });
return ( <div tw="flex flex-col w-full my-12"> <div tw="flex flex-col mx-auto"> <div tw="flex flex-row items-center justify-between -mb-1 text-black font-light"> <p tw="font-medium">{tracker.totalUptime}%</p> </div> {/* Empty State */} <div tw="flex flex-row relative"> {new Array(data.length).fill(null).map((_, i) => { return <div key={i} tw="h-16 w-3 rounded-full mr-1 bg-black/20" />; })} <div tw="flex flex-row-reverse absolute left-0"> {tracker.days.map((item, i) => { const isBlackListed = Boolean(item.blacklist); if (isBlackListed) { return ( <div key={i} tw="h-16 w-3 rounded-full mr-1 bg-status-operational/90" /> ); } return ( <div key={i} tw={cn( "mr-1 h-16 w-3 rounded-full", classNames[item.variant], )} /> ); })} </div> </div> <div tw="flex flex-row items-center justify-between -mt-3 text-slate-500 text-sm"> <p tw="">{data.length} days ago</p> <p tw="mr-1">{formatDate(new Date())}</p> </div> </div> </div> );}