add a title component

src/app/components/code-dialog.tsx

@@ -28,7 +28,7 @@ export function CodeDialog({ title, description, code, children }: CodeDialogPro
   return (
     <Dialog>
       <DialogTrigger asChild>{children}</DialogTrigger>
-      <DialogContent className="max-h-[700px] text-sm">
+      <DialogContent className="max-h-screen md:max-h-[700px] text-sm">
         <DialogHeader>
           <DialogTitle>{title}</DialogTitle>
           <DialogDescription>{description}</DialogDescription>

src/app/components/code-highlighter.tsx

@@ -64,19 +64,21 @@ function rowRenderer({
 
 export function CodeHighlighter({ code, rounded = true }: CodeHighlighterProps): ReactElement {
   return (
-    <SyntaxHighlighter
-      language="json"
-      style={atomOneDark}
-      wrapLongLines
-      renderer={rowRenderer}
-      customStyle={{
-        maxHeight: "600px",
-        backgroundColor: "hsl(var(--background-accent))",
-        wordBreak: "break-all",
-        borderRadius: rounded ? "0.75rem" : undefined,
-      }}
-    >
-      {code}
-    </SyntaxHighlighter>
+    <div className="text-xs md:text-md">
+      <SyntaxHighlighter
+        language="json"
+        style={atomOneDark}
+        wrapLongLines
+        renderer={rowRenderer}
+        customStyle={{
+          maxHeight: "600px",
+          backgroundColor: "hsl(var(--background-accent))",
+          wordBreak: "break-all",
+          borderRadius: rounded ? "0.75rem" : undefined,
+        }}
+      >
+        {code}
+      </SyntaxHighlighter>
+    </div>
   );
 }

src/app/components/player/player-view.tsx

@@ -45,7 +45,7 @@ export function PlayerView({ player }: PlayerViewProps): ReactElement {
           </div>
         </div>
       </Card>
-      <div className="flex gap-2 flex-wrap">
+      <div className="flex gap-2 flex-wrap justify-center">
         <CodeDialog
           title="Player Data"
           description="The player's data from the API"

src/app/components/server/server-view.tsx

@@ -55,7 +55,7 @@ export function ServerView({ server, favicon }: ServerViewProps): ReactElement {
           <Image src="/media/full-ping.png" alt="Ping!" width={28} height={28} />
         </div>
       </div>
-      <div className="flex gap-2 flex-wrap">
+      <div className="flex gap-2 flex-wrap justify-center">
         <CodeDialog
           title="Server Data"
           description="The servers's data from the API"

src/app/components/title.tsx

@@ -0,0 +1,15 @@
+import { ReactElement } from "react";
+
+type TitleProps = {
+  title: string | ReactElement;
+  subtitle: string | ReactElement;
+};
+
+export function Title({ title, subtitle }: TitleProps): ReactElement {
+  return (
+    <div className="flex flex-col gap-2 items-center">
+      <div className="text-3xl text-primary font-semibold">{typeof title === "string" ? <h1>{title}</h1> : title}</div>
+      {typeof subtitle === "string" ? <p>{subtitle}</p> : subtitle}
+    </div>
+  );
+}