openstatus.dev
Openstatus
www.openstatus.dev
🧑🎨 svg badge (#763)
* 🧑🎨 svg badge
* feat: svg badge
* fix: build
* fix: build
* chore: add fix size
* 🤔 trying something
* Revert "🤔 trying something"
This reverts commit 2e44e6208dc90bdc5ff6ca10618429474c441cf0.
---------
Co-authored-by: mxkaske <maximilian@kaske.org>
authored by
Thibault Le Ouay
mxkaske
and committed by
GitHub
f934d775
ef737fff
+67
+67
apps/web/src/app/status-page/[domain]/badge/route.tsx
+67
apps/web/src/app/status-page/[domain]/badge/route.tsx
···
1
+
import { ImageResponse } from "next/og";
2
+
import type { NextRequest } from "next/server";
3
+
4
+
import type { Status } from "@openstatus/react";
5
+
import { getStatus } from "@openstatus/react";
6
+
7
+
// Keep the `label` size within a maximum of 'Operational' to stay within the `SIZE` restriction
8
+
const statusDictionary: Record<Status, { label: string; color: string }> = {
9
+
operational: {
10
+
label: "Operational",
11
+
color: "bg-green-500",
12
+
},
13
+
degraded_performance: {
14
+
label: "Degraded",
15
+
color: "bg-yellow-500",
16
+
},
17
+
partial_outage: {
18
+
label: "Outage",
19
+
color: "bg-yellow-500",
20
+
},
21
+
major_outage: {
22
+
label: "Outage",
23
+
color: "bg-red-500",
24
+
},
25
+
unknown: {
26
+
label: "Unknown",
27
+
color: "bg-gray-500",
28
+
},
29
+
incident: {
30
+
label: "Incident",
31
+
color: "bg-yellow-500",
32
+
},
33
+
under_maintenance: {
34
+
label: "Maintenance",
35
+
color: "bg-gray-500",
36
+
},
37
+
} as const;
38
+
39
+
const SIZE = { width: 120, height: 34 };
40
+
41
+
export async function GET(
42
+
req: NextRequest,
43
+
{ params }: { params: { domain: string } },
44
+
) {
45
+
const { status } = await getStatus(params.domain);
46
+
const theme = req.nextUrl.searchParams.get("theme");
47
+
48
+
const { label, color } = statusDictionary[status];
49
+
50
+
const light = "border-gray-200 text-gray-700 bg-white";
51
+
const dark = "border-gray-800 text-gray-300 bg-gray-900";
52
+
53
+
return new ImageResponse(
54
+
(
55
+
<div
56
+
tw={`flex items-center justify-center rounded-md border px-3 py-1 text-sm ${
57
+
theme === "dark" ? dark : light
58
+
}`}
59
+
style={{ ...SIZE }}
60
+
>
61
+
{label}
62
+
<div tw={`flex h-2 w-2 rounded-full ml-2 ${color}`} />
63
+
</div>
64
+
),
65
+
{ ...SIZE },
66
+
);
67
+
}