Server embeds

Frontend/src/app/(pages)/server/[[...slug]]/page.tsx

@@ -1,3 +1,4 @@
+import Embed from "@/components/embed";
 import ServerResult from "@/components/server/server-result";
 import ServerSearch from "@/components/server/server-search";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
@@ -87,6 +88,41 @@ const ServerPage = async ({ params }: PageProps): Promise<ReactElement> => {
 export const generateMetadata = async ({
     params,
 }: PageProps): Promise<Metadata> => {
+    const platform: string | undefined = params.slug?.[0]; // The platform to search for
+    const hostname: string | undefined = params.slug?.[1]; // The hostname of the server to search for
+
+    // Try and get the server to display
+    if (platform && hostname) {
+        try {
+            const serverPlatform: ServerPlatform = platform as ServerPlatform;
+            const server:
+                | CachedJavaMinecraftServer
+                | CachedBedrockMinecraftServer = await getMinecraftServer(
+                serverPlatform,
+                hostname
+            ); // Get the server to embed
+            return Embed({
+                title: `${serverPlatform} Server: ${server.hostname}`,
+                description: `There are ${server.players.online}/${server.players.max} playing here!\n\nClick to view data about this server.`,
+                thumbnail: (server as CachedJavaMinecraftServer).favicon?.url,
+            });
+        } catch (err) {
+            const code: number = (err as RestfulMCAPIError).code; // Get the error status code
+            if (code === 400) {
+                return Embed({
+                    title: "Invalid Hostname",
+                    color: "#EB4034",
+                    description: `The hostname ${hostname} is invalid.`,
+                });
+            } else if (code === 404) {
+                return Embed({
+                    title: "Server Not Found",
+                    color: "#EB4034",
+                    description: `The server ${hostname} was not found.`,
+                });
+            }
+        }
+    }
     return {};
 };
 

Frontend/src/app/components/player/player-search.tsx

@@ -21,16 +21,14 @@ type PlayerSearchProps = {
  * @param query the query to search for
  * @returns the search component jsx
  */
-const PlayerSearch = ({
+const PlayerSearch = ({ query }: PlayerSearchProps): ReactElement => {
-    query,
-}: PlayerSearchProps): ReactElement => {
     const handleRedirect = async (form: FormData): Promise<void> => {
         "use server";
         redirect(`/player/${form.get("query")}`);
     };
     return (
         <form
-            className="flex flex-col gap-7 items-center"
+            className="flex flex-col gap-7 justify-center items-center"
             action={handleRedirect}
         >
             <div className="w-full flex flex-col gap-3">

Frontend/src/app/components/server/server-search.tsx

@@ -44,7 +44,7 @@ const ServerSearch = ({
     };
     return (
         <form
-            className="flex flex-col gap-7 items-center"
+            className="flex flex-col gap-7 justify-center items-center"
             action={handleRedirect}
         >
             <div className="w-full flex gap-2">