Tooltips in a few more places

Frontend/src/app/components/badge/raw-json.tsx

@@ -1,5 +1,6 @@
 import { ReactElement } from "react";
 import { Badge } from "@/components/ui/badge";
+import SimpleTooltip from "@/components/simple-tooltip";
 
 /**
  * A badge for raw json.
@@ -7,8 +8,10 @@ import { Badge } from "@/components/ui/badge";
  * @returns the raw json badge jsx
  */
 const RawJsonBadge = (): ReactElement => (
-    <Badge className="bg-minecraft-green-2 hover:bg-minecraft-green-2 hover:opacity-85 text-white font-semibold uppercase transition-all transform-gpu">
-        Raw Json
-    </Badge>
+    <SimpleTooltip content="Click to view raw JSON">
+        <Badge className="bg-minecraft-green-2 hover:bg-minecraft-green-2 hover:opacity-85 text-white font-semibold uppercase transition-all transform-gpu">
+            Raw Json
+        </Badge>
+    </SimpleTooltip>
 );
 export default RawJsonBadge;

Frontend/src/app/components/player/player-result.tsx

@@ -12,6 +12,7 @@ import { ReactElement } from "react";
 import { CachedPlayer, SkinPart } from "restfulmc-lib";
 import CodeDialog from "@/components/code/code-dialog";
 import RawJson from "@/components/badge/raw-json";
+import SimpleTooltip from "@/components/simple-tooltip";
 
 /**
  * The props for a player result.
@@ -85,7 +86,9 @@ const PlayerResult = ({ query, player }: PlayerResultProps): ReactElement => (
                     {/* Skin Parts */}
                     <div className="pt-3 w-[90%] flex flex-col gap-3">
                         {/* Header */}
-                        <h1 className="font-semibold uppercase">Skin Parts</h1>
+                        <h1 className="font-semibold uppercase select-none pointer-events-none">
+                            Skin Parts
+                        </h1>
 
                         {/* Skin Parts */}
                         <div className="flex gap-5">
@@ -101,17 +104,18 @@ const PlayerResult = ({ query, player }: PlayerResultProps): ReactElement => (
                                         [part, url]: [string, string],
                                         index: number
                                     ) => (
-                                        <Link
+                                        <SimpleTooltip
                                             key={index}
-                                            href={url}
-                                            target="_blank"
+                                            content={`Click to view ${player.username}'s ${part}`}
                                         >
-                                            <img
-                                                className="h-20 sm:h-24 md:h-28 hover:scale-[1.02] transition-all transform-gpu"
-                                                src={url}
-                                                alt={`${player.username}'s ${part}`}
-                                            />
-                                        </Link>
+                                            <Link href={url} target="_blank">
+                                                <img
+                                                    className="h-20 sm:h-24 md:h-28 hover:scale-[1.02] transition-all transform-gpu"
+                                                    src={url}
+                                                    alt={`${player.username}'s ${part}`}
+                                                />
+                                            </Link>
+                                        </SimpleTooltip>
                                     )
                                 )}
                         </div>

Frontend/src/app/components/player/player-search.tsx

@@ -4,6 +4,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { redirect } from "next/navigation";
 import { ReactElement } from "react";
+import SimpleTooltip from "@/components/simple-tooltip";
 
 /**
  * Props for a player search.
@@ -18,7 +19,7 @@ type PlayerSearchProps = {
 /**
  * A component for searching for a player.
  *
- * @param query the query to search for
+ * @param query the original query to search for
  * @returns the search component jsx
  */
 const PlayerSearch = ({ query }: PlayerSearchProps): ReactElement => {
@@ -31,6 +32,7 @@ const PlayerSearch = ({ query }: PlayerSearchProps): ReactElement => {
             className="flex flex-col gap-7 justify-center items-center"
             action={handleRedirect}
         >
+            {/* Input */}
             <div className="w-full flex flex-col gap-3">
                 <Label htmlFor="query">Username or UUID</Label>
                 <Input
@@ -43,7 +45,11 @@ const PlayerSearch = ({ query }: PlayerSearchProps): ReactElement => {
                     autoComplete="off"
                 />
             </div>
-            <MinecraftButton type="submit">Search</MinecraftButton>
+
+            {/* Search */}
+            <SimpleTooltip content="Click to search">
+                <MinecraftButton type="submit">Search</MinecraftButton>
+            </SimpleTooltip>
         </form>
     );
 };

Frontend/src/app/components/server/server-search.tsx

@@ -13,6 +13,7 @@ import { capitalize } from "@/app/common/string-utils";
 import { redirect } from "next/navigation";
 import { ReactElement } from "react";
 import { ServerPlatform } from "restfulmc-lib";
+import SimpleTooltip from "@/components/simple-tooltip";
 
 /**
  * Props for a server search.
@@ -21,7 +22,7 @@ type ServerSearchProps = {
     /**
      * The original platform to query for.
      */
-    platform: string | undefined;
+    platform: ServerPlatform | undefined;
 
     /**
      * The original hostname to query for.
@@ -32,7 +33,8 @@ type ServerSearchProps = {
 /**
  * A component for searching for a server.
  *
- * @param query the query to search for
+ * @param platform the original platform to query for
+ * @param hostname original hostname to query for
  * @returns the search component jsx
  */
 const ServerSearch = ({
@@ -48,15 +50,12 @@ const ServerSearch = ({
             className="flex flex-col gap-7 justify-center items-center"
             action={handleRedirect}
         >
+            {/* Input */}
             <div className="w-full flex gap-2">
                 {/* Platform Selection */}
                 <div className="flex flex-col gap-3">
                     <Label htmlFor="platform">Platform</Label>
-                    <Select
-                        name="platform"
-                        defaultValue={platform || "java"}
-                        required
-                    >
+                    <Select name="platform" defaultValue={platform} required>
                         <SelectTrigger className="w-28">
                             <SelectValue />
                         </SelectTrigger>
@@ -89,7 +88,11 @@ const ServerSearch = ({
                     />
                 </div>
             </div>
-            <MinecraftButton type="submit">Search</MinecraftButton>
+
+            {/* Search */}
+            <SimpleTooltip content="Click to search">
+                <MinecraftButton type="submit">Search</MinecraftButton>
+            </SimpleTooltip>
         </form>
     );
 };

Frontend/src/app/components/simple-tooltip.tsx

@@ -12,7 +12,7 @@ type SimpleTooltipProps = {
     /**
      * The content to display in the tooltip.
      */
-    content: string;
+    content: string | ReactNode;
 
     /**
      * The children to render in this tooltip.