openstatus.dev
Openstatus
www.openstatus.dev
1import type { Tracker } from "@openstatus/tracker";
2
3import { cn } from "@/lib/utils";
4
5export function StatusCheck({ tracker }: { tracker: Tracker }) {
6 const details = tracker.currentDetails;
7
8 // FIXME: move icons into @openstatus/tracker lib
9 function getVariant() {
10 switch (details.variant) {
11 case "maintenance":
12 return Hammer;
13 case "down":
14 return Minus;
15 case "degraded":
16 return Minus;
17 case "incident":
18 return Alert;
19 default:
20 return Check;
21 }
22 }
23
24 // REMINDER: we cannot use custom tailwind utility colors like `bg-status-operational/90` here
25 function getClassName() {
26 switch (details.variant) {
27 case "maintenance":
28 return "bg-blue-500/90 border-blue-500";
29 case "down":
30 return "bg-rose-500/90 border-rose-500";
31 case "degraded":
32 return "bg-amber-500/90 border-amber-500";
33 case "incident":
34 return "bg-rose-500/90 border-rose-500";
35 default:
36 return "bg-green-500/90 border-green-500";
37 }
38 }
39
40 const Icon = getVariant();
41
42 return (
43 <div tw="flex flex-col justify-center items-center w-full">
44 <div
45 tw={cn(
46 "flex text-white rounded-full p-3 border-2 mb-2",
47 getClassName(),
48 )}
49 >
50 <Icon />
51 </div>
52 <p style={{ fontFamily: "Cal" }} tw="text-4xl">
53 {details.long}
54 </p>
55 </div>
56 );
57}
58
59function Hammer() {
60 return (
61 <svg
62 xmlns="http://www.w3.org/2000/svg"
63 width="40"
64 height="40"
65 viewBox="0 0 24 24"
66 fill="none"
67 stroke="currentColor"
68 stroke-width="2"
69 stroke-linecap="round"
70 stroke-linejoin="round"
71 >
72 <path d="m15 12-8.373 8.373a1 1 0 1 1-3-3L12 9" />
73 <path d="m18 15 4-4" />
74 <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" />
75 </svg>
76 );
77}
78
79function Check() {
80 return (
81 <svg
82 xmlns="http://www.w3.org/2000/svg"
83 width="40"
84 height="40"
85 viewBox="0 0 24 24"
86 fill="none"
87 stroke="currentColor"
88 stroke-width="2"
89 stroke-linecap="round"
90 stroke-linejoin="round"
91 >
92 <path d="M20 6 9 17l-5-5" />
93 </svg>
94 );
95}
96
97function Minus() {
98 return (
99 <svg
100 xmlns="http://www.w3.org/2000/svg"
101 width="40"
102 height="40"
103 viewBox="0 0 24 24"
104 fill="none"
105 stroke="currentColor"
106 stroke-width="2"
107 stroke-linecap="round"
108 stroke-linejoin="round"
109 >
110 <path d="M5 12h14" />
111 </svg>
112 );
113}
114
115function Alert() {
116 return (
117 <svg
118 xmlns="http://www.w3.org/2000/svg"
119 width="40"
120 height="40"
121 viewBox="0 0 24 24"
122 fill="none"
123 stroke="currentColor"
124 stroke-width="2"
125 stroke-linecap="round"
126 stroke-linejoin="round"
127 >
128 <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" />
129 <path d="M12 9v4" />
130 <path d="M12 17h.01" />
131 </svg>
132 );
133}