use new api format

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

@@ -0,0 +1,149 @@
+import { Card } from "@/app/components/card";
+import { ErrorCard } from "@/app/components/error-card";
+import { LookupServer } from "@/app/components/server/lookup-server";
+import { generateEmbed } from "@/common/embed";
+import { formatNumber } from "@/common/number-utils";
+import { capitalizeFirstLetter } from "@/common/string-utils";
+import {
+  CachedBedrockMinecraftServer,
+  CachedJavaMinecraftServer,
+  McUtilsAPIError,
+  ServerPlatform,
+  getServer,
+} from "mcutils-library";
+import { Metadata } from "next";
+import Image from "next/image";
+
+type Params = {
+  params: {
+    platform: ServerPlatform;
+    hostname: string;
+  };
+};
+
+/**
+ * Gets the favicon for a server
+ *
+ * @param platform the platform of the server
+ * @param server the server to get the favicon from
+ * @returns the favicon url or null if there is no favicon
+ */
+function getFavicon(
+  platform: ServerPlatform,
+  server: CachedJavaMinecraftServer | CachedBedrockMinecraftServer
+): string | undefined {
+  if (platform === ServerPlatform.Bedrock) {
+    return undefined;
+  }
+  server = server as CachedJavaMinecraftServer;
+  return server.favicon && server.favicon.url;
+}
+
+/**
+ * Checks if a platform is valid
+ *
+ * @param platform the platform to check
+ * @returns true if the platform is valid, false otherwise
+ */
+function checkPlatform(platform: ServerPlatform): boolean {
+  return platform === ServerPlatform.Java || platform === ServerPlatform.Bedrock;
+}
+
+export async function generateMetadata({ params: { platform, hostname } }: Params): Promise<Metadata> {
+  try {
+    if (checkPlatform(platform) === false) {
+      return generateEmbed({
+        title: "Server Not Found",
+        description: "Invalid platform",
+      });
+    }
+    const server = await getServer(platform, hostname);
+    const { hostname: serverHostname, players } = server as CachedJavaMinecraftServer | CachedBedrockMinecraftServer;
+
+    const favicon = server ? getFavicon(platform, server) : undefined;
+
+    const description = `
+    ${capitalizeFirstLetter(platform)} Server
+    Hostname: ${serverHostname}
+    ${players.online}/${players.max} players online`;
+
+    return generateEmbed({
+      title: `${serverHostname}`,
+      description: description,
+      image: favicon,
+    });
+  } catch (err) {
+    return generateEmbed({
+      title: "Server Not Found",
+      description: (err as McUtilsAPIError).message,
+    });
+  }
+}
+
+export default async function Page({ params: { platform, hostname } }: Params): Promise<JSX.Element> {
+  let error: string | undefined = undefined; // The error to display
+  let server: CachedJavaMinecraftServer | CachedBedrockMinecraftServer | undefined = undefined; // The server to display
+  let invalidPlatform = checkPlatform(platform) === false;
+
+  // Try and get the player to display
+  try {
+    console.log(platform);
+    if (invalidPlatform) {
+      error = "Invalid platform"; // Set the error message
+    } else {
+      server = platform && hostname ? await getServer(platform, hostname) : undefined;
+    }
+  } catch (err) {
+    error = (err as McUtilsAPIError).message; // Set the error message
+  }
+
+  const favicon = server ? getFavicon(platform, server) : undefined;
+
+  return (
+    <div className="h-full flex flex-col items-center">
+      <div className="mb-4 text-center">
+        <h1 className="text-xl">Lookup a {invalidPlatform ? "" : capitalizeFirstLetter(platform)} Server</h1>
+        <p>You can enter a server hostname to get information about the server.</p>
+
+        <LookupServer />
+      </div>
+
+      {error && <ErrorCard message={error} />}
+      {server != null && (
+        <Card className="w-max xs:w-fit">
+          <div className="flex gap-4 flex-col">
+            <div className="flex gap-4 flex-col xs:flex-row">
+              {favicon && (
+                <div className="flex justify-center xs:justify-start">
+                  <Image
+                    className="w-[64px] h-[64px]"
+                    src={favicon}
+                    width={64}
+                    height={64}
+                    quality={100}
+                    alt="The server's favicon"
+                  />
+                </div>
+              )}
+
+              <div className="flex flex-col">
+                <h2 className="text-xl text-primary">{server.hostname}</h2>
+                <div>
+                  <p>
+                    Players online: {formatNumber(server.players.online)}/{formatNumber(server.players.max)}
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div className="bg-background rounded-lg p-2 text-sm xs:text-lg">
+              {server.motd.html.map((line, index) => {
+                return <p key={index} dangerouslySetInnerHTML={{ __html: line }}></p>;
+              })}
+            </div>
+          </div>
+        </Card>
+      )}
+    </div>
+  );
+}