add raw json button for player and server

src/app/components/code-dialog.tsx

@@ -0,0 +1,34 @@
+import { ReactElement } from "react";
+import SyntaxHighlighter from "react-syntax-highlighter";
+import { atomOneDarkReasonable } from "react-syntax-highlighter/dist/esm/styles/hljs";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";
+
+type CodeDialogProps = {
+  title: string;
+  description: string;
+  code: string;
+  children: React.ReactNode;
+};
+
+export function CodeDialog({ title, description, code, children }: CodeDialogProps): ReactElement {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent className="max-h-[700px]">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+        <SyntaxHighlighter
+          language="javascript"
+          style={atomOneDarkReasonable}
+          customStyle={{
+            maxHeight: "600px",
+          }}
+        >
+          {code}
+        </SyntaxHighlighter>
+      </DialogContent>
+    </Dialog>
+  );
+}