start work on cleaning up types and add try a player and server to their pages

src/app/components/player/try-a-player.tsx

@@ -0,0 +1,49 @@
+import { ReactElement } from "react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/app/components/ui/tooltip";
+import Image from "next/image";
+import config from "@root/config.json";
+import Link from "next/link";
+import { Card } from "@/app/components/card";
+
+/**
+ * The players to try out.
+ */
+const tryMePlayers: string[] = ["Notch", "jeb_", "Dinnerbone", "Grumm", "Mojang"];
+
+export function TryAPlayer(): ReactElement {
+  return (
+    <Card>
+      <div className="flex flex-col items-center justify-center text-center">
+        <div>
+          <h2 className="text-lg font-semibold">Try a Player</h2>
+          <p className="text-muted-foreground">Try one of these players to see how the player view works.</p>
+        </div>
+
+        <div className="flex flex-wrap justify-center gap-2 max-w-2xl mt-4">
+          {tryMePlayers.map(playerName => (
+            <Tooltip key={playerName}>
+              <TooltipTrigger asChild>
+                <div className="flex items-center justify-center bg-background p-1.5 rounded-md gap-2">
+                  <Image
+                    src={`${config.apiEndpoint}/player/head/${playerName}`}
+                    alt={"The player's head"}
+                    width={32}
+                    height={32}
+                  />
+                  <Link href={`/player/${playerName}`} className="hover:opacity-85 transform-gpu transition-all">
+                    {playerName}
+                  </Link>
+                </div>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>
+                  Click to try the player <b>{playerName}</b>.
+                </p>
+              </TooltipContent>
+            </Tooltip>
+          ))}
+        </div>
+      </div>
+    </Card>
+  );
+}

src/app/components/server/try-a-server.tsx

@@ -0,0 +1,54 @@
+import { ReactElement } from "react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/app/components/ui/tooltip";
+import Image from "next/image";
+import Link from "next/link";
+import { capitalizeFirstLetter } from "@/app/common/string-utils";
+import { Card } from "@/app/components/card";
+import { ServerPlatform } from "mcutils-library";
+import { TryMeServer } from "@/app/types/server/try-me-server";
+
+/**
+ * The servers to try out.
+ */
+const tryMeServers: TryMeServer[] = [
+  { platform: ServerPlatform.Java, hostname: "mc.hypixel.net" },
+  { platform: ServerPlatform.Java, hostname: "wildprison.net" },
+  { platform: ServerPlatform.Java, hostname: "cubecraft.net" },
+  { platform: ServerPlatform.Bedrock, hostname: "geo.hivebedrock.network" },
+];
+
+export function TryAServer(): ReactElement {
+  return (
+    <Card>
+      <div className="flex flex-col items-center justify-center text-center">
+        <div>
+          <h2 className="text-lg font-semibold">Try a Server</h2>
+          <p className="text-muted-foreground">Try one of these servers to see how the server view works.</p>
+        </div>
+
+        <div className="flex flex-wrap justify-center gap-2 max-w-2xl mt-4">
+          {tryMeServers.map(({ platform, hostname }) => (
+            <Tooltip key={hostname}>
+              <TooltipTrigger asChild>
+                <div className="flex items-center justify-center bg-background p-1.5 rounded-md gap-2">
+                  <Image src={`/media/platform/${platform}.png`} alt={"The server's platform"} width={28} height={28} />
+                  <Link
+                    href={`/server/${platform}/${hostname}`}
+                    className="hover:opacity-85 transform-gpu transition-all"
+                  >
+                    {hostname}
+                  </Link>
+                </div>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>
+                  Click to try the <b>{capitalizeFirstLetter(platform)}</b> server: <b>{hostname}</b>
+                </p>
+              </TooltipContent>
+            </Tooltip>
+          ))}
+        </div>
+      </div>
+    </Card>
+  );
+}