use new api format

2024-04-17 17:21:15 +01:00
parent 14c6f79bea
commit 1e732e923f
12 changed files with 207 additions and 222 deletions
--- a/src/app/(pages)/player/[[...id]]/page.tsx
+++ b/src/app/(pages)/player/[[...id]]/page.tsx
@ -0,0 +1,102 @@
+/* eslint-disable @next/next/no-img-element */
+import { Card } from "@/app/components/card";
+import { ErrorCard } from "@/app/components/error-card";
+import { LookupPlayer } from "@/app/components/player/lookup-player";
+import { generateEmbed } from "@/common/embed";
+import { CachedPlayer, McUtilsAPIError, SkinPart, getPlayer } from "mcutils-library";
+import { Metadata } from "next";
+import Image from "next/image";
+import Link from "next/link";
+
+type Params = {
+  params: {
+    id: string;
+  };
+};
+
+export async function generateMetadata({ params: { id } }: Params): Promise<Metadata> {
+  try {
+    const player = await getPlayer(id);
+
+    const { username, uniqueId, skin } = player;
+    const headPartUrl = skin.parts.head;
+
+    const description = `
+    Username: ${username}
+    UUID: ${uniqueId}`;
+
+    return generateEmbed({
+      title: `${username}`,
+      description: description,
+      image: headPartUrl,
+    });
+  } catch (err) {
+    return generateEmbed({
+      title: "Player Not Found",
+      description: (err as McUtilsAPIError).message,
+    });
+  }
+}
+
+export default async function Page({ params: { id } }: Params): Promise<JSX.Element> {
+  let error: string | undefined = undefined; // The error to display
+  let player: CachedPlayer | undefined = undefined; // The player to display
+
+  // Try and get the player to display
+  try {
+    player = id ? await getPlayer(id) : undefined;
+  } catch (err) {
+    error = (err as McUtilsAPIError).message; // Set the error message
+  }
+
+  return (
+    <div className="h-full flex flex-col items-center">
+      <div className="mb-4 text-center">
+        <h1 className="text-xl">Lookup a Player</h1>
+        <p>You can enter a players uuid or username to get information about the player.</p>
+
+        <LookupPlayer />
+      </div>
+
+      {error && <ErrorCard message={error} />}
+      {player != undefined && (
+        <Card className="w-max xs:w-fit">
+          <div className="flex gap-4 flex-col xs:flex-row">
+            <div className="flex justify-center xs:justify-start">
+              <Image
+                className="w-[96px] h-[96px]"
+                src={player.skin.parts.head}
+                width={96}
+                height={96}
+                quality={100}
+                alt="The player's skin"
+              />
+            </div>
+
+            <div className="flex flex-col gap-2 divide-y divide-neutral-200 dark:divide-neutral-700">
+              <div>
+                <h2 className="text-xl text-primary">{player.username}</h2>
+                <p>{player.uniqueId}</p>
+              </div>
+
+              <div className="flex flex-col gap-2">
+                <p className="text-lg mt-2">Skin Parts</p>
+                <div className="flex gap-2">
+                  {Object.entries(player.skin.parts)
+                    .filter(([part]) => part !== SkinPart.HEAD) // Don't show the head part again
+                    .map(([part, url]) => {
+                      return (
+                        <Link key={part} href={url} target="_blank">
+                          <img className="h-[64px]" src={url} alt={`The player's ${part}`} loading="lazy" />
+                        </Link>
+                      );
+                    })}
+                </div>
+              </div>
+            </div>
+          </div>
+        </Card>
+      )}
+    </div>
+  );
+}