feat(ssr): add tooltip to youtube button

2023-11-16 10:21:08 +00:00 · 2023-11-16 10:21:08 +00:00 · 65e8df76a2
commit 65e8df76a2
parent 925e423955
1 changed files with 22 additions and 15 deletions
--- a/src/components/player/score/Score.tsx
+++ b/src/components/player/score/Score.tsx
@ -150,21 +150,28 @@ export default function Score({
              <CopyBsrButton mapId={mapId} />
            </div>
            <div className="flex gap-1">
-              <Link
-                href={`${songNameToYouTubeLink(
-                  leaderboard.songName,
-                  leaderboard.songSubName,
-                  leaderboard.songAuthorName,
-                )}`}
-                target="_blank"
-              >
-                <Button
-                  className="h-[30px] w-[30px] bg-neutral-700 p-1"
-                  variant={"secondary"}
-                >
-                  <YouTubeLogo size={20} />
-                </Button>
-              </Link>
+              <Tooltip>
+                <TooltipTrigger>
+                  <Link
+                    href={`${songNameToYouTubeLink(
+                      leaderboard.songName,
+                      leaderboard.songSubName,
+                      leaderboard.songAuthorName,
+                    )}`}
+                    target="_blank"
+                  >
+                    <Button
+                      className="h-[30px] w-[30px] bg-neutral-700 p-1"
+                      variant={"secondary"}
+                    >
+                      <YouTubeLogo size={20} />
+                    </Button>
+                  </Link>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>Click to view the song on YouTube</p>
+                </TooltipContent>
+              </Tooltip>
            </div>
          </>
        )}