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">
-            <p>Username: {player.username}</p>
+          <div className="flex gap-2 flex-col md:flex-row">
+            <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>