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

import { Card } from "@/app/components/card";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/app/components/ui/table";
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 Link from "next/link";
import { ReactElement } from "react";

/**
 * Force the page to be dynamic, so it will be regenerated on every request
 */
export const dynamic = "force-dynamic";

/**
 * 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";
  }
}

/**
 * Formats the status
 *
 * @param status the status of the endpoint
 * @returns the formatted status
 */
function formatStatus(status: any): string {
  return capitalizeFirstLetter(status.toLowerCase());
}

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())}`;

  return generateEmbed({
    title: "Mojang Status",
    description: description,
  });
}

export default async function Page(): Promise<ReactElement> {
  const { endpoints } = await getMojangEndpointStatus();
  const endpointsSize = Object.entries(endpoints).length;

  return (
    <div>
      <div className="text-center mb-4">
        <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>
          )}
        </div>
      </Card>
    </div>
  );
}