openstatus.dev
Openstatus
www.openstatus.dev
1import { Tracker as OSTracker, classNames } from "@openstatus/tracker";
2
3import type { ResponseStatusTracker } from "@/lib/tb";
4import { cn, formatDate } from "@/lib/utils";
5
6interface TrackerProps {
7 data: ResponseStatusTracker[];
8}
9
10export function Tracker({ data }: TrackerProps) {
11 const tracker = new OSTracker({ data });
12
13 return (
14 <div tw="flex flex-col w-full my-12">
15 <div tw="flex flex-col mx-auto">
16 <div tw="flex flex-row items-center justify-between -mb-1 text-black font-light">
17 <p tw="font-medium">{tracker.totalUptime}%</p>
18 </div>
19 {/* Empty State */}
20 <div tw="flex flex-row relative">
21 {new Array(data.length).fill(null).map((_, i) => {
22 return <div key={i} tw="h-16 w-3 rounded-full mr-1 bg-black/20" />;
23 })}
24 <div tw="flex flex-row-reverse absolute left-0">
25 {tracker.days.map((item, i) => {
26 const isBlackListed = Boolean(item.blacklist);
27 if (isBlackListed) {
28 return (
29 <div
30 key={i}
31 tw="h-16 w-3 rounded-full mr-1 bg-status-operational/90"
32 />
33 );
34 }
35 return (
36 <div
37 key={i}
38 tw={cn(
39 "h-16 w-3 rounded-full mr-1",
40 classNames[item.variant],
41 )}
42 />
43 );
44 })}
45 </div>
46 </div>
47 <div tw="flex flex-row items-center justify-between -mt-3 text-slate-500 text-sm">
48 <p tw="">{data.length} days ago</p>
49 <p tw="mr-1">{formatDate(new Date())}</p>
50 </div>
51 </div>
52 </div>
53 );
54}