openstatus.dev
Openstatus
www.openstatus.dev
fix: widget (#357)
authored by
Maximilian Kaske
and committed by
GitHub
9a97a2bf
efb7d027
+34
-25
+16
-9
apps/docs/pages/api-server/status-widget.mdx
+16
-9
apps/docs/pages/api-server/status-widget.mdx
···
72
72
"degraded_performance",
73
73
"partial_outage",
74
74
"major_outage",
75
-
"under_maintenance", // currently not in use
75
+
"under_maintenance",
76
76
"unknown",
77
77
]);
78
78
···
112
112
const data = await res.json();
113
113
const parsed = statusSchema.safeParse(data);
114
114
115
-
let label = "Unknown";
116
-
let color = "bg-gray-500";
117
-
118
-
if (parsed.success) {
119
-
const status = dictionary[parsed.data.status];
120
-
label = status.label;
121
-
color = status.color;
115
+
if (!parsed.success) {
116
+
return null;
122
117
}
118
+
119
+
const key = parsed.data.status;
120
+
const { label, color } = dictionary[key];
123
121
124
122
return (
125
123
<a
···
129
127
rel="noreferrer"
130
128
>
131
129
{label}
132
-
<span className={`inline-block h-2 w-2 rounded-full ${color}`} />
130
+
<span className="relative flex h-2 w-2">
131
+
{parsed.data.status === "operational" ? (
132
+
<span
133
+
className={`absolute inline-flex h-full w-full animate-ping rounded-full ${color} opacity-75 duration-1000`}
134
+
/>
135
+
) : null}
136
+
<span
137
+
className={`relative inline-flex h-2 w-2 rounded-full ${color}`}
138
+
/>
139
+
</span>
133
140
</a>
134
141
);
135
142
}
+16
-8
apps/web/src/components/status-widget.tsx
+16
-8
apps/web/src/components/status-widget.tsx
···
5
5
"degraded_performance",
6
6
"partial_outage",
7
7
"major_outage",
8
+
"under_maintenance",
8
9
"unknown",
9
10
]);
10
11
···
44
45
const data = await res.json();
45
46
const parsed = statusSchema.safeParse(data);
46
47
47
-
let label = "Unknown";
48
-
let color = "bg-gray-500";
49
-
50
-
if (parsed.success) {
51
-
const status = dictionary[parsed.data.status];
52
-
label = status.label;
53
-
color = status.color;
48
+
if (!parsed.success) {
49
+
return null;
54
50
}
51
+
52
+
const key = parsed.data.status;
53
+
const { label, color } = dictionary[key];
55
54
56
55
return (
57
56
<a
···
61
60
rel="noreferrer"
62
61
>
63
62
{label}
64
-
<span className={`inline-block h-2 w-2 rounded-full ${color}`} />
63
+
<span className="relative flex h-2 w-2">
64
+
{parsed.data.status === "operational" ? (
65
+
<span
66
+
className={`absolute inline-flex h-full w-full animate-ping rounded-full ${color} opacity-75 duration-1000`}
67
+
/>
68
+
) : null}
69
+
<span
70
+
className={`relative inline-flex h-2 w-2 rounded-full ${color}`}
71
+
/>
72
+
</span>
65
73
</a>
66
74
);
67
75
}