Add the Mojang status page
All checks were successful
Deploy Frontend / docker (17, 3.8.5) (push) Successful in 2m58s

This commit is contained in:
Braydon 2024-04-18 13:58:21 -04:00
parent cb0280f817
commit bacdc9319f
3 changed files with 89 additions and 1 deletions

Binary file not shown.

@ -32,7 +32,7 @@
"react-countup": "^6.5.3", "react-countup": "^6.5.3",
"react-dom": "^18", "react-dom": "^18",
"react-hook-form": "^7.51.3", "react-hook-form": "^7.51.3",
"restfulmc-lib": "^1.1.2", "restfulmc-lib": "^1.1.3",
"sonner": "^1.4.41", "sonner": "^1.4.41",
"tailwind-merge": "^2.2.2", "tailwind-merge": "^2.2.2",
"tailwindcss-animate": "^1.0.7" "tailwindcss-animate": "^1.0.7"

@ -0,0 +1,88 @@
import { minecrafter } from "@/font/fonts";
import { cn } from "@/lib/utils";
import { Metadata } from "next";
import Link from "next/link";
import { ReactElement } from "react";
import {
MojangServerStatus,
MojangServerStatusResponse,
getMojangServerStatus,
} from "restfulmc-lib";
/**
* Page metadata.
*/
export const metadata: Metadata = {
title: "Mojang Status",
description: "View the status of Mojang servers.",
};
/**
* The page to view the
* status of Mojang servers.
*
* @returns the page jsx
*/
const MojangStatusPage = async (): Promise<ReactElement> => {
const { servers }: MojangServerStatusResponse =
await getMojangServerStatus(); // Get Mojang server statuses
return (
<main className="h-screen flex flex-col gap-7 justify-center items-center">
{/* Header */}
<h1
className={cn(
"mt-20 text-6xl text-minecraft-green-3 text-center pointer-events-none",
minecrafter.className
)}
>
Mojang Status
</h1>
{/* Server Statuses */}
<div className="w-[25rem] xs:w-[29rem] sm:w-[33.5rem] px-5 py-2 flex flex-col gap-2.5 bg-muted rounded-xl divide-y-2 divide-zinc-700/40 transition-all transform-gpu">
{servers.map((server, index) => {
const status: MojangServerStatus = server.status; // The status of the server
return (
<div
key={index}
className="pt-2 flex justify-between items-center"
>
<div className="flex flex-col gap-0.5">
<h1 className="pointer-events-none">
{server.name}
</h1>
<Link
href={server.endpoint}
className="text-xs text-minecraft-green-3 hover:opacity-85 transition-all transform-gpu"
>
<code>{server.endpoint}</code>
</Link>
</div>
{/* Status */}
<h2
className={cn(
"font-semibold",
statusStyles[status]
)}
>
{status}
</h2>
</div>
);
})}
</div>
</main>
);
};
/**
* The styles for each status.
*/
const statusStyles: any = {
ONLINE: "text-green-500",
DEGRADED: "text-yellow-500",
OFFLINE: "text-red-500",
};
export default MojangStatusPage;