Fascinated/scoresaber-reloadedv3
1
1
Fork 0
Code Issues 1 Pull Requests 2 Actions Packages Activity

make the players name gray in the mini card to indicate its them
All checks were successful
Deploy / deploy (push) Successful in 2m26s
Details

Browse Source
This commit is contained in:
Lee 2024-09-27 22:17:10 +01:00
parent 61b8fce571
commit d9b68f0c65
1 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/ranking/mini.tsx
View File

@ -98,7 +98,7 @@ export default function Mini({ type, player }: MiniProps) {
}
return (
<Card className="w-full flex gap-2 sticky">
<Card className="w-full flex gap-2 sticky select-none">
<div className="flex gap-2">
{icon}
<p>{type} Ranking</p>
@ -106,27 +106,27 @@ export default function Mini({ type, player }: MiniProps) {
<div className="flex flex-col">
{isLoading && <p className="text-gray-400">Loading...</p>}
{isError && <p className="text-red-500">Error</p>}
{players?.map((player, index) => {
const rank = type == "Global" ? player.rank : player.countryRank;
{players?.map((playerRanking, index) => {
const rank = type == "Global" ? playerRanking.rank : playerRanking.countryRank;
const playerName =
player.name.length > PLAYER_NAME_MAX_LENGTH
? player.name.substring(0, PLAYER_NAME_MAX_LENGTH) + "..."
: player.name;
playerRanking.name.length > PLAYER_NAME_MAX_LENGTH
? playerRanking.name.substring(0, PLAYER_NAME_MAX_LENGTH) + "..."
: playerRanking.name;
return (
<Link
key={index}
href={`/player/${player.id}`}
href={`/player/${playerRanking.id}`}
className="flex justify-between gap-2 bg-accent px-2 py-1.5 cursor-pointer transform-gpu transition-all hover:brightness-75 first:rounded-t last:rounded-b"
>
<div className="flex gap-2">
<p className="text-gray-400">#{formatNumberWithCommas(rank)}</p>
<Avatar className="w-6 h-6 pointer-events-none">
<AvatarImage alt="Profile Picture" src={player.profilePicture} />
<AvatarImage alt="Profile Picture" src={playerRanking.profilePicture} />
</Avatar>
<p>{playerName}</p>
<p className={playerRanking.id === player.id ? "text-gray-400" : ""}>{playerName}</p>
</div>
<p className="text-pp">{formatPp(player.pp)}pp</p>
<p className="text-pp">{formatPp(playerRanking.pp)}pp</p>
</Link>
);
})}