new mojang status page, and add color to the embed based on if there was any offline or degraded

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

@@ -4,10 +4,11 @@ import { generateEmbed } from "@/common/embed";
 import { capitalizeFirstLetter } from "@/common/string-utils";
 import { formatTime } from "@/common/time-utils";
 import { cn } from "@/common/utils";
-import { getMojangEndpointStatus } from "mcutils-library";
-import { Metadata } from "next";
+import { CachedEndpointStatus, getMojangEndpointStatus, Status } from "mcutils-library";
+import { Metadata, Viewport } from "next";
 import Link from "next/link";
 import { ReactElement } from "react";
+import { Colors } from "@/common/colors";
 
 /**
  * Force the page to be dynamic, so it will be regenerated on every request
@@ -43,15 +44,31 @@ function formatStatus(status: any): string {
   return capitalizeFirstLetter(status.toLowerCase());
 }
 
+export async function generateViewport(): Promise<Viewport> {
+  const { endpoints } = await getMojangEndpointStatus();
+
+  let warning = false;
+  for (const endpoint of endpoints) {
+    if (endpoint.status != Status.ONLINE) {
+      warning = true;
+      break;
+    }
+  }
+
+  return {
+    themeColor: warning ? Colors.yellow : Colors.green,
+  };
+}
+
 export async function generateMetadata(): Promise<Metadata> {
   const { endpoints } = await getMojangEndpointStatus();
 
-  let description = Object.entries(endpoints)
-    .map(([url, status]) => {
-      return `${url}: ${formatStatus(status)}`;
-    })
-    .join("\n");
-  description += `\n\nEmbed Cache: ${formatTime(new Date())}`;
+  let description = "Current Mojang API Status:\n";
+  for (const endpoint of endpoints) {
+    const { name, hostname, status } = endpoint;
+
+    description += `${name} (${hostname}): ${status}\n`;
+  }
 
   return generateEmbed({
     title: "Mojang Status",
@@ -61,7 +78,6 @@ export async function generateMetadata(): Promise<Metadata> {
 
 export default async function Page(): Promise<ReactElement> {
   const { endpoints } = await getMojangEndpointStatus();
-  const endpointsSize = Object.entries(endpoints).length;
 
   return (
     <div>
@@ -69,35 +85,32 @@ export default async function Page(): Promise<ReactElement> {
         <h1 className="text-xl">Mojang Status</h1>
         <p>The current status of Mojang Services</p>
       </div>
-      <Card classNameContent="w-full xs:w-fit text-left">
-        <div>
-          {endpointsSize === 0 && <p>Unable to fetch endpoint statuses</p>}
-          {endpointsSize > 0 && (
-            <Table className="md:w-[500px] text-start">
-              <TableHeader>
-                <TableRow>
-                  <TableHead className="pl-1 h-8">Service</TableHead>
-                  <TableHead className="pl-1 h-8">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-left")}>
-                        {formatStatus(status)}
-                      </TableCell>
-                    </TableRow>
-                  );
-                })}
-              </TableBody>
-            </Table>
-          )}
+      <Card classNameCard="py-0 pb-2" classNameContent="w-[23rem] md:w-[35rem] text-left">
+        <div className="flex flex-col divide-y gap-2">
+          {endpoints.length == 0 && <p>Unable to fetch endpoint statuses</p>}
+          {endpoints.length > 0 &&
+            endpoints.map((endpoint: CachedEndpointStatus) => {
+              const { name, hostname, status } = endpoint;
+
+              const url = `https://${hostname}`;
+              return (
+                <div key={name} className="flex flex-row justify-between pt-2">
+                  <div className="flex flex-col leading-[1.5rem]">
+                    <p className="font-semibold">{name}</p>
+                    <Link
+                      href={url}
+                      className="text-sm text-primary hover:opacity-75 transition-all transform-gpu"
+                      target="_blank"
+                    >
+                      <p>{url}</p>
+                    </Link>
+                  </div>
+                  <div className={cn("flex items-center font-semibold", getColor(status))}>
+                    <p>{formatStatus(status)}</p>
+                  </div>
+                </div>
+              );
+            })}
         </div>
       </Card>
     </div>

src/app/globals.css

@@ -40,7 +40,7 @@
     --secondary-foreground: 0 0% 98%;
     --muted: 0 0% 15%;
     --muted-foreground: 240 5% 64.9%;
-    --accent: 12 6.5% 15.1%;
+    --accent: 12 6.5% 75%;
     --accent-foreground: 0 0% 98%;
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 85.7% 97.3%;