From 3c912a4591d680bb91cbe723b4e0205b70d39bc5 Mon Sep 17 00:00:00 2001
From: Rainnny7 <braydonrainnny@gmail.com>
Date: Mon, 22 Apr 2024 01:04:06 -0400
Subject: [PATCH] Add recommendation tooltips

---
 .../server/server-recommendations.tsx         | 28 +++++++++++--------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/Frontend/src/app/components/server/server-recommendations.tsx b/Frontend/src/app/components/server/server-recommendations.tsx
index c3bf0e2..55eb077 100644
--- a/Frontend/src/app/components/server/server-recommendations.tsx
+++ b/Frontend/src/app/components/server/server-recommendations.tsx
@@ -5,6 +5,8 @@ import { ServerPlatform } from "restfulmc-lib";
 import { Button } from "@/components/ui/button";
 import Image from "next/image";
 import Link from "next/link";
+import SimpleTooltip from "@/components/simple-tooltip";
+import { capitalize } from "@/lib/string-utils";
 
 /**
  * The recommendations for a server.
@@ -45,18 +47,22 @@ const ServerRecommendations = (): ReactElement => (
                     index: number
                 ): ReactElement => (
                     <Link key={index} href={`/server/${platform}/${hostname}`}>
-                        <Button
-                            className="px-10 flex gap-2.5 font-semibold hover:opacity-85 transition-all transform-gpu"
-                            variant="outline"
+                        <SimpleTooltip
+                            content={`Click to test ${capitalize(platform)} server`}
                         >
-                            <Image
-                                src={`/media/platform/${platform}.png`}
-                                alt=""
-                                width={26}
-                                height={26}
-                            />
-                            <span>{hostname}</span>
-                        </Button>
+                            <Button
+                                className="px-10 flex gap-2.5 font-semibold hover:opacity-85 transition-all transform-gpu"
+                                variant="outline"
+                            >
+                                <Image
+                                    src={`/media/platform/${platform}.png`}
+                                    alt=""
+                                    width={26}
+                                    height={26}
+                                />
+                                <span>{hostname}</span>
+                            </Button>
+                        </SimpleTooltip>
                     </Link>
                 )
             )}