add more stats and add a tooltip to them

src/app/(pages)/page.tsx

@@ -1,9 +1,9 @@
-import Link from "next/link";
-import { Button } from "../components/ui/button";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../components/ui/tooltip";
-import { Separator } from "../components/ui/separator";
-import { ReactElement } from "react";
 import { Stats } from "@/app/components/stats";
+import Link from "next/link";
+import { ReactElement } from "react";
+import { Button } from "../components/ui/button";
+import { Separator } from "../components/ui/separator";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../components/ui/tooltip";
 
 type Button = {
   title: string;
@@ -29,7 +29,7 @@ const buttons: Button[] = [
 
 export default function Home(): ReactElement {
   return (
-    <div className="text-center flex flex-col gap-4">
+    <div className="text-center flex flex-col gap-4 mt-4">
       <div>
         <h1 className="text-4xl mb-2">Minecraft Utilities</h1>
         <div className="text-lg">

src/app/components/container.tsx

@@ -8,7 +8,7 @@ export default function Container({
   return (
     <div className="z-[9999] m-auto flex h-screen min-h-full flex-col items-center opacity-90 w-full xs:max-w-[1200px]">
       <NavBar />
-      <div className="w-full flex m-4 justify-center">{children}</div>
+      <div className="w-full flex mt-4 justify-center">{children}</div>
     </div>
   );
 }

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

@@ -37,14 +37,14 @@ export function LookupPlayer(): JSX.Element {
   };
 
   return (
-    <form className="flex gap-2 justify-center mt-2" action="" onSubmit={(event) => event.preventDefault()}>
+    <form className="flex gap-2 justify-center mt-2" action="" onSubmit={event => event.preventDefault()}>
       <Input
         className="w-fit"
         type="search"
         name="query"
         placeholder="Name / UUID"
         value={id}
-        onChange={(event) => {
+        onChange={event => {
           setId(event.target.value);
         }}
         maxLength={36}

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

@@ -68,7 +68,7 @@ export function LookupServer(): JSX.Element {
     <form
       className="flex gap-2 justify-center items-center mt-2 flex-col xs:flex-row"
       action=""
-      onSubmit={(event) => event.preventDefault()}
+      onSubmit={event => event.preventDefault()}
     >
       <Input
         className="w-fit"

src/app/components/stats.tsx

@@ -1,13 +1,15 @@
 "use client";
 
-import { ReactElement } from "react";
 import { StorageIcon } from "@/app/components/icon/storage-icon";
 import { Stat } from "@/app/components/stat";
+import { ReactElement } from "react";
 import useWebSocket from "react-use-websocket";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
 
 type Stat = {
   id: string;
   displayName: string;
+  tooltip: string;
   icon: ReactElement;
 };
 
@@ -15,21 +17,43 @@ const stats: Stat[] = [
   {
     id: "totalRequests",
     displayName: "Total Requests",
+    tooltip: "The total amount of requests to the API",
+    icon: <StorageIcon />,
+  },
+  {
+    id: "totalPlayerLookups",
+    displayName: "Player Lookups",
+    tooltip: "The total amount of player lookups",
+    icon: <StorageIcon />,
+  },
+  {
+    id: "totalServerLookups",
+    displayName: "Server Lookups",
+    tooltip: "The total amount of server lookups",
     icon: <StorageIcon />,
   },
 ];
 
 export function Stats(): ReactElement {
-  const { lastMessage, readyState } = useWebSocket("wss://api.mcutils.xyz/websocket/metrics");
+  const { lastMessage } = useWebSocket("wss://api.mcutils.xyz/websocket/metrics");
   const metrics = lastMessage !== null ? JSON.parse(lastMessage.data).metrics : undefined;
 
   return (
-    <>
+    <div className="flex gap-4">
       {stats.map((stat, index) => {
         const value = metrics ? metrics[stat.id] : "???";
 
-        return <Stat key={index} title={stat.displayName} value={value} icon={stat.icon} />;
+        return (
+          <Tooltip key={index}>
+            <TooltipTrigger className="cursor-default">
+              <Stat title={stat.displayName} value={value} icon={stat.icon} />
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{stat.tooltip}</p>
+            </TooltipContent>
+          </Tooltip>
+        );
       })}
-    </>
+    </div>
   );
 }