Fascinated/scoresaber-reloadedv3
Archived
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 ( return (
<Card className="w-full flex gap-2 sticky"> <Card className="w-full flex gap-2 sticky select-none">
<div className="flex gap-2"> <div className="flex gap-2">
{icon} {icon}
<p>{type} Ranking</p> <p>{type} Ranking</p>
@ -106,27 +106,27 @@ export default function Mini({ type, player }: MiniProps) {
<div className="flex flex-col"> <div className="flex flex-col">
{isLoading && <p className="text-gray-400">Loading...</p>} {isLoading && <p className="text-gray-400">Loading...</p>}
{isError && <p className="text-red-500">Error</p>} {isError && <p className="text-red-500">Error</p>}
{players?.map((player, index) => { {players?.map((playerRanking, index) => {
const rank = type == "Global" ? player.rank : player.countryRank; const rank = type == "Global" ? playerRanking.rank : playerRanking.countryRank;
const playerName = const playerName =
player.name.length > PLAYER_NAME_MAX_LENGTH playerRanking.name.length > PLAYER_NAME_MAX_LENGTH
? player.name.substring(0, PLAYER_NAME_MAX_LENGTH) + "..." ? playerRanking.name.substring(0, PLAYER_NAME_MAX_LENGTH) + "..."
: player.name; : playerRanking.name;
return ( return (
<Link <Link
key={index} 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" 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"> <div className="flex gap-2">
<p className="text-gray-400">#{formatNumberWithCommas(rank)}</p> <p className="text-gray-400">#{formatNumberWithCommas(rank)}</p>
<Avatar className="w-6 h-6 pointer-events-none"> <Avatar className="w-6 h-6 pointer-events-none">
<AvatarImage alt="Profile Picture" src={player.profilePicture} /> <AvatarImage alt="Profile Picture" src={playerRanking.profilePicture} />
</Avatar> </Avatar>
<p>{playerName}</p> <p className={playerRanking.id === player.id ? "text-gray-400" : ""}>{playerName}</p>
</div> </div>
<p className="text-pp">{formatPp(player.pp)}pp</p> <p className="text-pp">{formatPp(playerRanking.pp)}pp</p>
</Link> </Link>
); );
})} })}