49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
import { OverlayPlayer } from "@/overlay/type/overlayPlayer";
|
|
import { formatNumber } from "@/utils/numberUtils";
|
|
import { GlobeAltIcon } from "@heroicons/react/20/solid";
|
|
import Image from "next/image";
|
|
import CountyFlag from "../CountryFlag";
|
|
|
|
type PlayerStatsProps = {
|
|
player: OverlayPlayer;
|
|
settings: any;
|
|
};
|
|
|
|
const leaderboardImages: Record<string, string> = {
|
|
scoresaber: "/assets/logos/scoresaber.png",
|
|
beatleader: "/assets/logos/beatleader.png",
|
|
};
|
|
|
|
export default function PlayerStats({ player, settings }: PlayerStatsProps) {
|
|
return (
|
|
<div className="flex gap-2 p-2">
|
|
<Image
|
|
alt="Player profile picture"
|
|
className="rounded-md"
|
|
src={player.profilePicture}
|
|
width={180}
|
|
height={180}
|
|
/>
|
|
<div>
|
|
<div className="flex gap-1">
|
|
<Image
|
|
alt="Leaderboard logo"
|
|
src={leaderboardImages[settings.platform]}
|
|
width={36}
|
|
height={36}
|
|
/>
|
|
<p className="text-3xl">{formatNumber(player.pp, 2)}pp</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<GlobeAltIcon width={25} height={25} />
|
|
<p className="text-3xl">#{formatNumber(player.rank)}</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<CountyFlag className="w-[25px]" countryCode={player.country} />
|
|
<p className="text-3xl">#{formatNumber(player.countryRank)}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|