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,9 +124,10 @@ 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 && (
           <>
+            <div className="flex gap-1">
               <Tooltip>
                 <TooltipTrigger>
                   <Link
@@ -145,6 +148,23 @@ export default function Score({
               </Tooltip>
 
               <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(
+      " ",
+      "+",
+    ),
+  );
+}