add mojang endpoint status page

src/app/(pages)/mojang/page.tsx

@@ -0,0 +1,72 @@
+import { Card } from "@/app/components/card";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/app/components/ui/table";
+import { cn } from "@/common/utils";
+import { getMojangEndpointStatus } from "mcutils-library";
+import { CachedEndpointStatus } from "mcutils-library/dist/types/cache/cachedEndpointStatus";
+import Link from "next/link";
+
+async function getData(): Promise<CachedEndpointStatus> {
+  const status = await getMojangEndpointStatus();
+  return status;
+}
+
+/**
+ * Gets the color of the status
+ *
+ * @param status the status of the endpoint
+ * @returns the color of the status
+ */
+function getColor(status: any): string {
+  switch (status) {
+    case "ONLINE":
+      return "text-green-500";
+    case "DEGRADED":
+      return "text-yellow-500";
+    case "OFFLINE":
+      return "text-red-500";
+    default:
+      return "text-gray-500";
+  }
+}
+
+export default async function Page(): Promise<JSX.Element> {
+  const { endpoints } = await getData();
+  const endpointsSize = Object.entries(endpoints).length;
+
+  return (
+    <div className="flex justify-center text-center">
+      <Card className="w-max xs:w-fit">
+        <h1 className="text-xl">Mojang Status</h1>
+        <p>The current status of Mojang Services</p>
+
+        <div>
+          {endpointsSize === 0 && <p>Unable to fetch endpoint statuses</p>}
+          {endpointsSize > 0 && (
+            <Table className="mt-4 md:w-[500px] text-start">
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="pl-1">Service</TableHead>
+                  <TableHead className="pl-1 text-center">Status</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {Object.entries(endpoints).map(([url, status]) => {
+                  return (
+                    <TableRow key={url}>
+                      <TableCell className="p-[0.3rem]">
+                        <Link className="hover:text-primary transition-all" href={url} target="_blank">
+                          {url}
+                        </Link>
+                      </TableCell>
+                      <TableCell className={cn(getColor(status), "p-[0.3rem] text-center")}>{status}</TableCell>
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          )}
+        </div>
+      </Card>
+    </div>
+  );
+}

src/app/(pages)/player/[id]/page.tsx

@@ -54,7 +54,7 @@ export default async function Page({ params }: Params): Promise<JSX.Element> {
         <LookupPlayer />
       </div>
 
-      <Card>
+      <Card className="w-max xs:w-fit">
         {player == null && <NotFound message="Invalid UUID / Username" />}
         {player != null && (
           <div className="flex gap-4 flex-col xs:flex-row">

src/app/(pages)/server/[platform]/[hostname]/page.tsx

@@ -75,7 +75,7 @@ export default async function Page({ params: { platform, hostname } }: Params):
         <LookupServer />
       </div>
 
-      <Card>
+      <Card className="w-max xs:w-fit">
         {server == null && <NotFound message="Server not responding" />}
         {server != null && (
           <div className="flex gap-4 flex-col">