add a title component

src/app/(pages)/mojang/status/page.tsx

@@ -7,6 +7,7 @@ import { Metadata, Viewport } from "next";
 import Link from "next/link";
 import { ReactElement } from "react";
 import { Colors } from "@/common/colors";
+import { Title } from "@/app/components/title";
 
 /**
  * Force the page to be dynamic, so it will be regenerated on every request
@@ -80,8 +81,7 @@ export default async function Page(): Promise<ReactElement> {
   return (
     <div>
       <div className="text-center mb-4">
-        <h1 className="text-xl">Mojang Status</h1>
+        <Title title="Mojang Status" subtitle="The current status of Mojang Services" />
-        <p>The current status of Mojang Services</p>
       </div>
       <Card
         classNameCard="py-0 pb-2 w-screen xs:w-[28rem] md:w-[35rem]"

src/app/(pages)/page.tsx

@@ -4,6 +4,7 @@ import { ReactElement } from "react";
 import { Button } from "../components/ui/button";
 import { Separator } from "../components/ui/separator";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../components/ui/tooltip";
+import { Title } from "@/app/components/title";
 
 type Button = {
   /**
@@ -51,16 +52,18 @@ const buttons: Button[] = [
 export default function Home(): ReactElement {
   return (
     <div className="text-center flex flex-col gap-4">
-      <div className="p-4">
+      <div className="p-2">
-        <div>
+        <Title
-          <h1 className="text-4xl mb-2">Minecraft Utilities</h1>
+          title="Minecraft Utilities"
-          <div>
+          subtitle={
-            <p>
+            <>
-              Minecraft Utilities offers you many endpoints to get information about a minecraft server or a player.
+              <p>
-            </p>
+                Minecraft Utilities offers you many endpoints to get information about a minecraft server or a player.
-            <p>We offer you a simple and easy to use API.</p>
+              </p>
-          </div>
+              <p>We offer you a simple and easy to use API.</p>
-        </div>
+            </>
+          }
+        />
 
         <div className="flex flex-row gap-2 justify-center mt-4 flex-wrap">
           {buttons.map((button, index) => {
@@ -84,7 +87,7 @@ export default function Home(): ReactElement {
 
       <Separator />
 
-      <div className="flex flex-col gap-4 items-center pt-4">
+      <div className="flex flex-col gap-4 items-center p-2">
         <div className="text-center">
           <p className="font-semibold text-xl">API Statistics</p>
           <p>View the statistics for the API in real-time!</p>

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

@@ -11,6 +11,7 @@ import config from "@root/config.json";
 import { CachedPlayer, getPlayer, McUtilsAPIError } from "mcutils-library";
 import { Metadata, Viewport } from "next";
 import { ReactElement } from "react";
+import { Title } from "@/app/components/title";
 
 /**
  * Force the page to be dynamic, so it will be regenerated on every request
@@ -71,8 +72,10 @@ export default async function Page({ params: { id } }: Params): Promise<ReactEle
   return (
     <div className="h-full flex flex-col items-center">
       <div className="mb-4 text-center">
-        <h1 className="text-xl">Lookup a Player</h1>
+        <Title
-        <p>You can enter a players uuid or username to get information about the player.</p>
+          title="Player Lookup"
+          subtitle="You can enter a players uuid or username to get information about the player."
+        />
 
         <LookupPlayer currentPlayer={id && id[0]} />
       </div>

src/app/(pages)/server/[platform]/[[...hostname]]/page.tsx

@@ -18,6 +18,7 @@ import {
 } from "mcutils-library";
 import { Metadata, Viewport } from "next";
 import { ReactElement } from "react";
+import { Title } from "@/app/components/title";
 
 /**
  * Force the page to be dynamic, so it will be regenerated on every request
@@ -126,8 +127,10 @@ export default async function Page({ params: { platform, hostname } }: Params):
   return (
     <div className="h-full flex flex-col items-center">
       <div className="mb-4 text-center">
-        <h1 className="text-xl">Lookup a {invalidPlatform ? "" : capitalizeFirstLetter(platform)} Server</h1>
+        <Title
-        <p>You can enter a server hostname to get information about the server.</p>
+          title={`Lookup a ${invalidPlatform ? "" : capitalizeFirstLetter(platform)} Server`}
+          subtitle="You can enter a server hostname to get information about the server."
+        />
 
         <LookupServer currentPlatform={platform.toLowerCase()} currentServer={hostname && hostname[0]} />
       </div>

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
+    <div className="text-xs md:text-md">
-      language="json"
+      <SyntaxHighlighter
-      style={atomOneDark}
+        language="json"
-      wrapLongLines
+        style={atomOneDark}
-      renderer={rowRenderer}
+        wrapLongLines
-      customStyle={{
+        renderer={rowRenderer}
-        maxHeight: "600px",
+        customStyle={{
-        backgroundColor: "hsl(var(--background-accent))",
+          maxHeight: "600px",
-        wordBreak: "break-all",
+          backgroundColor: "hsl(var(--background-accent))",
-        borderRadius: rounded ? "0.75rem" : undefined,
+          wordBreak: "break-all",
-      }}
+          borderRadius: rounded ? "0.75rem" : undefined,
-    >
+        }}
-      {code}
+      >
-    </SyntaxHighlighter>
+        {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>
+  );
+}