show players!

Frontend/next.config.mjs

@@ -1,4 +1,13 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+	images: {
+		remotePatterns: [
+			{
+				protocol: "https",
+				hostname: "mc.rainnny.club",
+			},
+		],
+	},
+};
 
 export default nextConfig;

Frontend/package.json

@@ -25,7 +25,7 @@
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.51.3",
-    "restfulmc-lib": "^1.0.9",
+    "restfulmc-lib": "^1.1.1",
     "tailwind-merge": "^2.2.2",
     "tailwindcss-animate": "^1.0.7"
   },

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

@@ -5,6 +5,7 @@ import { PageProps } from "@/types/page";
 import { Metadata } from "next";
 import Image from "next/image";
 import { CachedPlayer, getPlayer, type RestfulMCAPIError } from "restfulmc-lib";
+import PlayerResult from "../../../components/player/player-result";
 
 /**
  * The page to lookup a player.
@@ -34,7 +35,7 @@ const PlayerPage = async ({ params }: PageProps): Promise<JSX.Element> => {
 			<div className="flex gap-32">
 				{/* Header */}
 				<Image
-					className="pointer-events-none"
+					className="my-auto h-[28rem] pointer-events-none"
 					src="/media/players.webp"
 					alt="Minecraft Players"
 					width={632}
@@ -56,6 +57,9 @@ const PlayerPage = async ({ params }: PageProps): Promise<JSX.Element> => {
 
 					{/* Search */}
 					<PlayerSearch query={query} />
+
+					{/* Player Result */}
+					{result && <PlayerResult player={result} />}
 				</div>
 			</div>
 		</main>

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

@@ -0,0 +1,66 @@
+/* eslint-disable @next/next/no-img-element */
+import Image from "next/image";
+import Link from "next/link";
+import { CachedPlayer, SkinPart } from "restfulmc-lib";
+
+/**
+ * The result of a player search.
+ *
+ * @param player the player to display
+ * @returns the player result jsx
+ */
+const PlayerResult = ({
+	player: {
+		uniqueId,
+		username,
+		skin: { parts },
+	},
+}: {
+	player: CachedPlayer;
+}): JSX.Element => (
+	<div className="px-2 py-3 flex flex-col gap-3 items-center bg-muted rounded-xl divide-y divide-zinc-700">
+		{/* Details */}
+		<div className="flex gap-5 items-center">
+			{/* Player Head */}
+			<Image
+				src={parts[SkinPart.HEAD]}
+				alt={`${username}'s Head`}
+				width={128}
+				height={128}
+			/>
+
+			{/* Name & Unique ID */}
+			<div className="flex flex-col gap-1.5">
+				<h1 className="text-xl font-bold text-minecraft-green-3">{username}</h1>
+				<code className="text-zinc-300">{uniqueId}</code>
+			</div>
+		</div>
+
+		{/* Skin Parts */}
+		<div className="pt-3 w-[90%] flex flex-col gap-3">
+			{/* Header */}
+			<h1 className="font-semibold uppercase">Skin Parts</h1>
+
+			{/* Skin Parts */}
+			<div className="flex gap-5">
+				{Object.entries(parts)
+					.filter(
+						([part]) =>
+							part === SkinPart.HEAD ||
+							part === SkinPart.FACE ||
+							part === SkinPart.BODY_FLAT
+					)
+					.map(([part, url], index) => (
+						<Link key={index} href={url} target="_blank">
+							<img
+								className="h-28 hover:scale-[1.02] transition-all transform-gpu"
+								src={url}
+								alt={`${username}'s ${part}`}
+							/>
+						</Link>
+					))}
+			</div>
+		</div>
+	</div>
+);
+export default PlayerResult;

Frontend/src/app/globals.css

@@ -19,7 +19,7 @@
 		--secondary: 240 3.7% 15.9%;
 		--secondary-foreground: 0 0% 98%;
 
-		--muted: 240 3.7% 15.9%;
+		--muted: 20 4% 14%;
 		--muted-foreground: 240 5% 64.9%;
 
 		--accent: 240 3.7% 15.9%;