redesign leaderboard scores

projects/website/src/components/ranking/player-ranking.tsx

@@ -1,13 +1,11 @@
 "use client";
 
 import { formatNumberWithCommas, formatPp } from "@ssr/common/utils/number-utils";
-import CountryFlag from "@/components/country-flag";
 import ScoreSaberPlayerToken from "@ssr/common/types/token/scoresaber/score-saber-player-token";
-import Link from "next/link";
 import useDatabase from "@/hooks/use-database";
 import { useLiveQuery } from "dexie-react-hooks";
-import { Avatar, AvatarImage } from "@/components/ui/avatar";
 import { clsx } from "clsx";
+import { TablePlayer } from "@/components/table-player";
 
 type PlayerRankingProps = {
   player: ScoreSaberPlayerToken;
@@ -16,7 +14,7 @@ type PlayerRankingProps = {
 
 export function PlayerRanking({ player, isCountry }: PlayerRankingProps) {
   const database = useDatabase();
-  const settings = useLiveQuery(() => database.getSettings());
+  const claimedPlayer = useLiveQuery(() => database.getClaimedPlayer());
 
   const history = player.histories.split(",").map(Number);
   const weeklyRankChange = history[history?.length - 6] - player.rank;
@@ -28,22 +26,7 @@ export function PlayerRanking({ player, isCountry }: PlayerRankingProps) {
         <span className="text-sm">{isCountry && "(#" + formatNumberWithCommas(player.rank) + ")"}</span>
       </td>
       <td className="flex items-center gap-2 px-4 py-2">
-        <Avatar className="w-[24px] h-[24px] pointer-events-none">
-          <AvatarImage
-            alt="Profile Picture"
-            src={`https://img.fascinated.cc/upload/w_128,h_128/${player.profilePicture}`}
-          />
-        </Avatar>
-        <CountryFlag code={player.country} size={12} />
-        <Link className="transform-gpu transition-all hover:text-blue-500" href={`/player/${player.id}`}>
-          <p
-            className={
-              player.id == settings?.playerId ? "transform-gpu text-pp transition-all hover:brightness-75" : ""
-            }
-          >
-            {player.name}
-          </p>
-        </Link>
+        <TablePlayer player={player} claimedPlayer={claimedPlayer} />
       </td>
       <td className="px-4 py-2 text-pp text-center">{formatPp(player.pp)}pp</td>
       <td className="px-4 py-2 text-center">{formatNumberWithCommas(player.scoreStats.totalPlayCount)}</td>