From 8da9ec73d125efe7523b3128764194b2592ffca4 Mon Sep 17 00:00:00 2001
From: Liam <liam@fascinated.cc>
Date: Thu, 12 Sep 2024 17:52:01 +0100
Subject: [PATCH] add a tooltip wrapper

---
 src/components/player/claim-profile.tsx    | 15 +++-----
 src/components/player/score/score-info.tsx | 40 ++++++++++------------
 src/components/tooltip.tsx                 | 22 ++++++++++++
 3 files changed, 45 insertions(+), 32 deletions(-)
 create mode 100644 src/components/tooltip.tsx

diff --git a/src/components/player/claim-profile.tsx b/src/components/player/claim-profile.tsx
index a2e9f4d..2751424 100644
--- a/src/components/player/claim-profile.tsx
+++ b/src/components/player/claim-profile.tsx
@@ -5,8 +5,8 @@ import { useLiveQuery } from "dexie-react-hooks";
 import { setPlayerIdCookie } from "../../common/website-utils";
 import useDatabase from "../../hooks/use-database";
 import { useToast } from "../../hooks/use-toast";
+import Tooltip from "../tooltip";
 import { Button } from "../ui/button";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 
 type Props = {
   /**
@@ -39,15 +39,10 @@ export default function ClaimProfile({ playerId }: Props) {
   }
 
   return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Button variant={"outline"} onClick={claimProfile}>
-          <CheckIcon className="size-6 text-green-500" />
-        </Button>
-      </TooltipTrigger>
-      <TooltipContent>
-        <p>Set as your profile</p>
-      </TooltipContent>
+    <Tooltip display={<p>Set as your profile</p>}>
+      <Button variant={"outline"} onClick={claimProfile}>
+        <CheckIcon className="size-6 text-green-500" />
+      </Button>
     </Tooltip>
   );
 }
diff --git a/src/components/player/score/score-info.tsx b/src/components/player/score/score-info.tsx
index dd0dcfa..688f9a8 100644
--- a/src/components/player/score/score-info.tsx
+++ b/src/components/player/score/score-info.tsx
@@ -1,10 +1,9 @@
 import ScoreSaberPlayerScore from "@/common/data-fetcher/types/scoresaber/scoresaber-player-score";
 import BeatSaverMap from "@/common/database/types/beatsaver-map";
 import { getDifficultyFromScoreSaberDifficulty } from "@/common/scoresaber-utils";
-import { songDifficultyToColor } from "@/common/song-utils";
 import FallbackLink from "@/components/fallback-link";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import { StarIcon } from "@radix-ui/react-icons";
+import Tooltip from "@/components/tooltip";
+import { StarIcon } from "@heroicons/react/24/solid";
 import clsx from "clsx";
 import Image from "next/image";
 
@@ -22,14 +21,21 @@ export default function ScoreSongInfo({ playerScore, beatSaverMap }: Props) {
   return (
     <div className="flex gap-3">
       <div className="relative flex justify-center  h-[64px]">
-        <Tooltip>
-          <TooltipTrigger
-            asChild
-            className="absolute w-full h-[20px] bottom-0 right-0 rounded-sm flex justify-center items-center text-xs"
-            style={{
-              backgroundColor: songDifficultyToColor(diff) + "f0", // Transparency value (in hex 0-255)
-            }}
-          >
+        <Tooltip
+          display={
+            <>
+              <p>
+                Difficulty: <span className="font-bold">{diff}</span>
+              </p>
+              {leaderboard.stars > 0 && (
+                <p>
+                  Stars: <span className="font-bold">{leaderboard.stars}</span>
+                </p>
+              )}
+            </>
+          }
+        >
+          <div className="absolute w-full h-[20px] bottom-0 right-0 rounded-sm flex justify-center items-center text-xs">
             {leaderboard.stars > 0 ? (
               <div className="flex gap-1 items-center justify-center">
                 <p>{leaderboard.stars}</p>
@@ -38,17 +44,7 @@ export default function ScoreSongInfo({ playerScore, beatSaverMap }: Props) {
             ) : (
               <p>{diff}</p>
             )}
-          </TooltipTrigger>
-          <TooltipContent>
-            <p>
-              Difficulty: <span className="font-bold">{diff}</span>
-            </p>
-            {leaderboard.stars > 0 && (
-              <p>
-                Stars: <span className="font-bold">{leaderboard.stars}</span>
-              </p>
-            )}
-          </TooltipContent>
+          </div>
         </Tooltip>
         <Image
           unoptimized
diff --git a/src/components/tooltip.tsx b/src/components/tooltip.tsx
new file mode 100644
index 0000000..00913a5
--- /dev/null
+++ b/src/components/tooltip.tsx
@@ -0,0 +1,22 @@
+import { Tooltip as ShadCnTooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
+
+type Props = {
+  /**
+   * What will trigger the tooltip
+   */
+  children: React.ReactNode;
+
+  /**
+   * What will be displayed in the tooltip
+   */
+  display: React.ReactNode;
+};
+
+export default function Tooltip({ children, display }: Props) {
+  return (
+    <ShadCnTooltip>
+      <TooltipTrigger asChild>{children}</TooltipTrigger>
+      <TooltipContent>{display}</TooltipContent>
+    </ShadCnTooltip>
+  );
+}