add basic server and player page

src/app/player/[id]/page.tsx

@@ -4,6 +4,7 @@ import { Card } from "@/components/ui/card";
 import { getPlayer } from "mcutils-library";
 import { Player } from "mcutils-library/dist/types/player/player";
 import { Metadata } from "next";
+import Image from "next/image";
 
 type Params = {
   params: {
@@ -53,8 +54,32 @@ export default async function Page({ params }: Params) {
       <Card>
         {player == null && <NotFound message="Player not found" />}
         {player != null && (
-          <div className="flex flex-col items-center gap-2">
+          <div className="flex gap-2 flex-col md:flex-row">
-            <p>Username: {player.username}</p>
+            <div className="flex justify-center md:justify-start">
+              <Image
+                className="w-fit h-fit"
+                src={player.skin.parts.head}
+                width={96}
+                height={96}
+                alt="The player's skin"
+              />
+            </div>
+
+            <div className="flex flex-col gap-2">
+              <div>
+                <h2 className="text-xl">{player.username}</h2>
+                <p className="text-gray-300">{player.uniqueId}</p>
+              </div>
+
+              <div className="flex flex-col gap-2">
+                <p className="text-lg">Skin Parts</p>
+                <div className="flex gap-2">
+                  {Object.entries(player.skin.parts).map(([key, value]) => {
+                    return <img className="h-[64px]" key={key} src={value} alt={`The player's ${key}`} />;
+                  })}
+                </div>
+              </div>
+            </div>
           </div>
         )}
       </Card>

src/app/server/[platform]/[hostname]/page.tsx

@@ -8,6 +8,7 @@ import JavaMinecraftServer from "mcutils-library/dist/types/server/javaServer";
 import { ServerPlatform } from "mcutils-library/dist/types/server/platform";
 import { MinecraftServer } from "mcutils-library/dist/types/server/server";
 import { Metadata } from "next";
+import Image from "next/image";
 
 type Params = {
   params: {
@@ -57,10 +58,18 @@ async function getData(platform: ServerPlatform, id: string): Promise<MinecraftS
 export default async function Page({ params: { platform, hostname } }: Params) {
   const server = await getData(platform, hostname);
 
+  let favicon = null; // Server favicon
+
+  if (platform === ServerPlatform.Java) {
+    // Java specific
+    const javaServer = server as JavaMinecraftServer;
+    favicon = javaServer.favicon && javaServer.favicon.url;
+  }
+
   return (
     <div className="h-full flex flex-col items-center">
       <div className="mb-4 text-center">
-        <h1 className="text-xl">Lookup a Server</h1>
+        <h1 className="text-xl">Lookup a {capitalizeFirstLetter(platform)} Server</h1>
         <p>You can enter a server hostname to get information about the server.</p>
 
         <LookupServer />
@@ -69,8 +78,21 @@ export default async function Page({ params: { platform, hostname } }: Params) {
       <Card>
         {server == null && <NotFound message="Server not found" />}
         {server != null && (
-          <div className="flex flex-col items-center gap-2">
+          <div className="flex gap-2 flex-col md:flex-row">
-            <p>Hostname: {server.hostname}</p>
+            {favicon && (
+              <div className="flex justify-center md:justify-start">
+                <Image className="w-fit h-fit" src={favicon} width={96} height={96} alt="The server's favicon" />
+              </div>
+            )}
+
+            <div className="flex flex-col">
+              <h2 className="text-xl">{server.hostname}</h2>
+              <div className="text-gray-300">
+                <p>
+                  Players online: {server.players.online}/{server.players.max}
+                </p>
+              </div>
+            </div>
           </div>
         )}
       </Card>

src/components/lookup-server.tsx

@@ -25,6 +25,9 @@ export function LookupServer() {
    * @param platform the server platform
    */
   const lookupServer = (platform: ServerPlatform) => {
+    if (!hostname || hostname.length === 0) {
+      return;
+    }
     router.push(`/server/${platform}/${hostname}`);
   };