add raw json button for player and server

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

@@ -1,5 +1,6 @@
 /* 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";
@@ -75,7 +76,19 @@ export default async function Page({ params: { id } }: Params): Promise<ReactEle
         <ContextMenu>
           <ContextMenuTrigger>
             <Card className="w-max xs:w-fit">
-              <div className="flex gap-4 flex-col xs:flex-row">
+              <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]"