From 58a97708fd6a03c3b39b95d633ff97ca35aa532b Mon Sep 17 00:00:00 2001
From: Rainnny7 <braydonrainnny@gmail.com>
Date: Mon, 22 Apr 2024 01:12:56 -0400
Subject: [PATCH] Tooltips in a few more places

---
 .../src/app/components/badge/raw-json.tsx     |  9 ++++---
 .../app/components/player/player-result.tsx   | 24 +++++++++++--------
 .../app/components/player/player-search.tsx   | 10 ++++++--
 .../app/components/server/server-search.tsx   | 19 ++++++++-------
 .../src/app/components/simple-tooltip.tsx     |  2 +-
 5 files changed, 40 insertions(+), 24 deletions(-)

diff --git a/Frontend/src/app/components/badge/raw-json.tsx b/Frontend/src/app/components/badge/raw-json.tsx
index 08da08b..dcf01bd 100644
--- a/Frontend/src/app/components/badge/raw-json.tsx
+++ b/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;
diff --git a/Frontend/src/app/components/player/player-result.tsx b/Frontend/src/app/components/player/player-result.tsx
index aff48d8..a15855d 100644
--- a/Frontend/src/app/components/player/player-result.tsx
+++ b/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>
diff --git a/Frontend/src/app/components/player/player-search.tsx b/Frontend/src/app/components/player/player-search.tsx
index bd2f792..44d925f 100644
--- a/Frontend/src/app/components/player/player-search.tsx
+++ b/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>
     );
 };
diff --git a/Frontend/src/app/components/server/server-search.tsx b/Frontend/src/app/components/server/server-search.tsx
index bb1888b..29732df 100644
--- a/Frontend/src/app/components/server/server-search.tsx
+++ b/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>
     );
 };
diff --git a/Frontend/src/app/components/simple-tooltip.tsx b/Frontend/src/app/components/simple-tooltip.tsx
index 5061efb..6c62a27 100644
--- a/Frontend/src/app/components/simple-tooltip.tsx
+++ b/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.