add a tooltip wrapper

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>
+    <Tooltip display={<p>Set as your profile</p>}>
       <Button variant={"outline"} onClick={claimProfile}>
         <CheckIcon className="size-6 text-green-500" />
       </Button>
-      </TooltipTrigger>
-      <TooltipContent>
-        <p>Set as your profile</p>
-      </TooltipContent>
     </Tooltip>
   );
 }

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,24 +21,9 @@ 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)
-            }}
-          >
-            {leaderboard.stars > 0 ? (
-              <div className="flex gap-1 items-center justify-center">
-                <p>{leaderboard.stars}</p>
-                <StarIcon className="w-4 h-4" />
-              </div>
-            ) : (
-              <p>{diff}</p>
-            )}
-          </TooltipTrigger>
-          <TooltipContent>
+        <Tooltip
+          display={
+            <>
               <p>
                 Difficulty: <span className="font-bold">{diff}</span>
               </p>
@@ -48,7 +32,19 @@ export default function ScoreSongInfo({ playerScore, beatSaverMap }: Props) {
                   Stars: <span className="font-bold">{leaderboard.stars}</span>
                 </p>
               )}
-          </TooltipContent>
+            </>
+          }
+        >
+          <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>
+                <StarIcon className="w-4 h-4" />
+              </div>
+            ) : (
+              <p>{diff}</p>
+            )}
+          </div>
         </Tooltip>
         <Image
           unoptimized

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>
+  );
+}