make song name clickable on leaderboard page (goes to beatsaver map)
All checks were successful
Deploy Website / docker (ubuntu-latest) (push) Successful in 2m7s

This commit is contained in:
Lee 2024-10-21 06:56:20 +01:00
parent 577fcb0e0d
commit fad22274fd

@ -6,6 +6,7 @@ import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leade
import { BeatSaverMap } from "@ssr/common/model/beatsaver/beatsaver-map"; import { BeatSaverMap } from "@ssr/common/model/beatsaver/beatsaver-map";
import { getBeatSaverMapperProfileUrl } from "@ssr/common/utils/beatsaver.util"; import { getBeatSaverMapperProfileUrl } from "@ssr/common/utils/beatsaver.util";
import FallbackLink from "@/components/fallback-link"; import FallbackLink from "@/components/fallback-link";
import { formatNumber } from "@ssr/common/utils/number-utils";
type LeaderboardInfoProps = { type LeaderboardInfoProps = {
/** /**
@ -26,9 +27,14 @@ export function LeaderboardInfo({ leaderboard, beatSaverMap }: LeaderboardInfoPr
<div className="flex flex-col justify-between w-full min-h-[160px]"> <div className="flex flex-col justify-between w-full min-h-[160px]">
{/* Song Info */} {/* Song Info */}
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<p className="font-semibold"> <FallbackLink
{leaderboard.songName} {leaderboard.songSubName} href={`https://beatsaver.com/maps/${beatSaverMap?.bsr}`}
</p> className="hover:brightness-[66%] transform-gpu transition-all"
>
<p className="font-semibold">
{leaderboard.songName} {leaderboard.songSubName}
</p>
</FallbackLink>
<p className="text-sm text-gray-400"> <p className="text-sm text-gray-400">
By <span className="text-pp">{leaderboard.songAuthorName}</span> By <span className="text-pp">{leaderboard.songAuthorName}</span>
</p> </p>
@ -45,7 +51,8 @@ export function LeaderboardInfo({ leaderboard, beatSaverMap }: LeaderboardInfoPr
</FallbackLink> </FallbackLink>
</p> </p>
<p> <p>
Plays: <span className="font-semibold">{leaderboard.plays}</span> ({leaderboard.dailyPlays} today) Plays: <span className="font-semibold">{formatNumber(leaderboard.plays)}</span> (
{formatNumber(leaderboard.dailyPlays)} today)
</p> </p>
<p> <p>
Status: <span className="font-semibold">{leaderboard.stars > 0 ? "Ranked" : "Unranked"}</span> Status: <span className="font-semibold">{leaderboard.stars > 0 ? "Ranked" : "Unranked"}</span>