cleanup, added country page and added button to go to country page on player info

src/components/player/PlayerInfo.tsx

@@ -136,13 +136,20 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
             </div>
 
             {/* Country Rank */}
-            <div className="flex items-center gap-1 text-gray-300">
-              <ReactCountryFlag
-                countryCode={playerData.country}
-                svg
-                className="!h-7 !w-7"
-              />
-              <p>#{playerData.countryRank}</p>
+            <div className="text-gray-300">
+              <a
+                className="flex transform-gpu items-center gap-1 transition-all hover:text-blue-500"
+                href={`/ranking/country/${playerData.country}?page=${Math.round(
+                  playerData.countryRank / 50,
+                )}`}
+              >
+                <ReactCountryFlag
+                  countryCode={playerData.country}
+                  svg
+                  className="!h-7 !w-7"
+                />
+                <p>#{playerData.countryRank}</p>
+              </a>
             </div>
 
             {/* PP */}

src/components/player/PlayerRanking.tsx

@@ -0,0 +1,53 @@
+import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
+import { useSettingsStore } from "@/store/settingsStore";
+import { formatNumber } from "@/utils/number";
+import Link from "next/link";
+import ReactCountryFlag from "react-country-flag";
+import { useStore } from "zustand";
+import Avatar from "../Avatar";
+
+type PlayerRankingProps = {
+  player: ScoresaberPlayer;
+};
+
+export default function PlayerRanking({ player }: PlayerRankingProps) {
+  const settingsStore = useStore(useSettingsStore, (store) => store);
+
+  return (
+    <>
+      <td className="px-4 py-2">#{formatNumber(player.rank)}</td>
+      <td className="flex items-center gap-2 px-4 py-2">
+        <Avatar url={player.profilePicture} label="Avatar" size={24} />
+        <ReactCountryFlag
+          countryCode={player.country}
+          svg
+          className="!h-5 !w-5"
+        />
+        <Link
+          className="transform-gpu transition-all hover:text-blue-500"
+          href={"/player/" + player.id}
+        >
+          <p
+            className={
+              player.id == settingsStore?.userId
+                ? "transform-gpu text-red-500 transition-all hover:text-blue-500"
+                : ""
+            }
+          >
+            {player.name}
+          </p>
+        </Link>
+      </td>
+      <td className="px-4 py-2">{formatNumber(player.pp)}pp</td>
+      <td className="px-4 py-2">
+        {formatNumber(player.scoreStats.totalPlayCount)}
+      </td>
+      <td className="px-4 py-2">
+        {formatNumber(player.scoreStats.rankedPlayCount)}
+      </td>
+      <td className="px-4 py-2">
+        {player.scoreStats.averageRankedAccuracy.toFixed(2) + "%"}
+      </td>
+    </>
+  );
+}