cleanup and docs

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

@@ -1,18 +1,14 @@
 /* eslint-disable @next/next/no-img-element */
-import { Card } from "@/app/components/card";
-import { CodeDialog } from "@/app/components/code-dialog";
 import { CopyButton } from "@/app/components/copy-button";
 import { ErrorCard } from "@/app/components/error-card";
 import { LookupPlayer } from "@/app/components/player/lookup-player";
+import { PlayerView } from "@/app/components/player/player-view";
 import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from "@/app/components/ui/context-menu";
-import { Separator } from "@/app/components/ui/separator";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/app/components/ui/tooltip";
 import { Colors } from "@/common/colors";
 import { generateEmbed } from "@/common/embed";
-import { CachedPlayer, McUtilsAPIError, SkinPart, getPlayer } from "mcutils-library";
+import { isValidPlayer } from "@/common/player";
+import { CachedPlayer, McUtilsAPIError, getPlayer } from "mcutils-library";
 import { Metadata, Viewport } from "next";
-import Image from "next/image";
-import Link from "next/link";
 import { ReactElement } from "react";
 import config from "../../../../../config.json";
 
@@ -23,43 +19,28 @@ type Params = {
 };
 
 export async function generateViewport({ params: { id } }: Params): Promise<Viewport> {
-  try {
-    if (!id || id.length === 0) {
-      return {
-        themeColor: Colors.red,
-      };
-    }
-    await getPlayer(id); // Ensure the player is valid.
-    return {
-      themeColor: Colors.green,
-    };
-  } catch (err) {
-    // An error occurred
-    return {
-      themeColor: Colors.red,
-    };
-  }
+  const validPlayer = await isValidPlayer(id);
+  return {
+    themeColor: validPlayer ? Colors.green : Colors.red,
+  };
 }
 
 export async function generateMetadata({ params: { id } }: Params): Promise<Metadata> {
+  // No id provided
+  if (!id || id.length === 0) {
+    return generateEmbed({
+      title: "Player Lookup",
+      description: "Click to lookup a player.",
+    });
+  }
+
   try {
-    // No id provided
-    if (!id || id.length === 0) {
-      return generateEmbed({
-        title: "Player Lookup",
-        description: "Click to lookup a player.",
-      });
-    }
-    const player = await getPlayer(id);
-
-    const { username, uniqueId, skin } = player;
+    const { username, uniqueId, skin } = await getPlayer(id);
     const headPartUrl = skin.parts.head;
 
-    const description = `UUID: ${uniqueId}\n\nClick to view more information about the player.`;
-
     return generateEmbed({
       title: `${username}`,
-      description: description,
+      description: `UUID: ${uniqueId}\n\nClick to view more information about the player.`,
       image: headPartUrl,
     });
   } catch (err) {
@@ -95,65 +76,7 @@ export default async function Page({ params: { id } }: Params): Promise<ReactEle
       {player != undefined && (
         <ContextMenu>
           <ContextMenuTrigger>
-            <Card className="w-max xs:w-fit">
-              <div className="flex gap-4 flex-col xs:flex-row relative">
-                <div className="absolute 8xl:top-0 xs:bottom-0">
-                  <CodeDialog
-                    title="Player Data"
-                    description="The player's data from the API"
-                    code={JSON.stringify(player, undefined, 2)}
-                  >
-                    <button className="bg-background rounded-lg">
-                      <p className="p-1">JSON</p>
-                    </button>
-                  </CodeDialog>
-                </div>
-
-                <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">
-                  <div>
-                    <h2 className="text-xl text-primary font-semibold">{player.username}</h2>
-                    <p>{player.uniqueId}</p>
-                  </div>
-
-                  <Separator />
-
-                  <div className="flex flex-col gap-2">
-                    <p className="text-lg">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 (
-                            <Tooltip key={part}>
-                              <TooltipTrigger>
-                                <Link href={url} target="_blank">
-                                  <img className="h-[64px]" src={url} alt={`The player's ${part}`} loading="lazy" />
-                                </Link>
-                              </TooltipTrigger>
-                              <TooltipContent>
-                                <p>
-                                  Click to view {player.username}&apos;s {part}
-                                </p>
-                              </TooltipContent>
-                            </Tooltip>
-                          );
-                        })}
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </Card>
+            <PlayerView player={player} />
           </ContextMenuTrigger>
           <ContextMenuContent className="flex flex-col">
             <CopyButton content={player.username}>