add a youtube link button to songs

src/components/icons/YouTubeLogo.tsx

@@ -0,0 +1,33 @@
+type YouTubeLogoProps = {
+  size?: number;
+  className?: string;
+};
+
+export default function YouTubeLogo({
+  size = 32,
+  className,
+}: YouTubeLogoProps) {
+  return (
+    <svg
+      height={size}
+      width={size}
+      version="1.1"
+      id="Layer_1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      viewBox="0 0 461.001 461.001"
+      xmlSpace="preserve"
+      className={className}
+    >
+      <g>
+        <path
+          fill="#F61C0D"
+          d="M365.257,67.393H95.744C42.866,67.393,0,110.259,0,163.137v134.728
+		c0,52.878,42.866,95.744,95.744,95.744h269.513c52.878,0,95.744-42.866,95.744-95.744V163.137
+		C461.001,110.259,418.135,67.393,365.257,67.393z M300.506,237.056l-126.06,60.123c-3.359,1.602-7.239-0.847-7.239-4.568V168.607
+		c0-3.774,3.982-6.22,7.348-4.514l126.06,63.881C304.363,229.873,304.298,235.248,300.506,237.056z"
+        />
+      </g>
+    </svg>
+  );
+}

src/components/player/score/Score.tsx

@@ -1,3 +1,4 @@
+import YouTubeLogo from "@/components/icons/YouTubeLogo";
 import { ScoresaberLeaderboardInfo } from "@/schemas/scoresaber/leaderboard";
 import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
 import { ScoresaberScore } from "@/schemas/scoresaber/score";
@@ -6,6 +7,7 @@ import { getPpGainedFromScore } from "@/utils/scoresaber/scores";
 import {
   scoresaberDifficultyNumberToName,
   songDifficultyToColor,
+  songNameToYouTubeLink,
 } from "@/utils/songUtils";
 import { formatDate, formatTimeAgo } from "@/utils/timeUtils";
 import {
@@ -122,29 +124,47 @@ export default function Score({
         </Link>
       </div>
 
-      <div className="hidden items-center justify-between gap-1 p-1 md:flex md:items-start md:justify-end">
+      <div className="hidden flex-col items-center justify-between gap-1 p-1 md:flex md:items-start md:justify-end">
         {mapId && (
           <>
-            <Tooltip>
+            <div className="flex gap-1">
-              <TooltipTrigger>
+              <Tooltip>
-                <Link
+                <TooltipTrigger>
-                  href={`https://beatsaver.com/maps/${mapId}`}
+                  <Link
-                  target="_blank"
+                    href={`https://beatsaver.com/maps/${mapId}`}
-                >
+                    target="_blank"
-                  <Button
-                    className="h-[30px] w-[30px] bg-neutral-700 p-1"
-                    variant={"secondary"}
                   >
-                    <BeatSaverLogo size={20} />
+                    <Button
-                  </Button>
+                      className="h-[30px] w-[30px] bg-neutral-700 p-1"
-                </Link>
+                      variant={"secondary"}
-              </TooltipTrigger>
+                    >
-              <TooltipContent>
+                      <BeatSaverLogo size={20} />
-                <p>Click to open the map page</p>
+                    </Button>
-              </TooltipContent>
+                  </Link>
-            </Tooltip>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>Click to open the map page</p>
+                </TooltipContent>
+              </Tooltip>
 
-            <CopyBsrButton mapId={mapId} />
+              <CopyBsrButton mapId={mapId} />
+            </div>
+            <div className="flex gap-1">
+              <Link
+                href={`${songNameToYouTubeLink(
+                  leaderboard.songName,
+                  leaderboard.songAuthorName,
+                )}`}
+                target="_blank"
+              >
+                <Button
+                  className="h-[30px] w-[30px] bg-neutral-700 p-1"
+                  variant={"secondary"}
+                >
+                  <YouTubeLogo size={20} />
+                </Button>
+              </Link>
+            </div>
           </>
         )}
       </div>

src/utils/songUtils.ts

@@ -48,3 +48,19 @@ export function scoresaberDifficultyNumberToName(
       return "unknown";
   }
 }
+
+/**
+ * Turns a song name and author into a YouTube link
+ *
+ * @param name the name of the song
+ * @param author the author of the song
+ * @returns the YouTube link for the song
+ */
+export function songNameToYouTubeLink(name: string, author: string) {
+  return encodeURI(
+    `https://www.youtube.com/results?search_query=${name} ${author}`.replaceAll(
+      " ",
+      "+",
+    ),
+  );
+}