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

src/app/ranking/global/page.tsx

@@ -1,15 +1,13 @@
 "use client";
 
-import Avatar from "@/components/Avatar";
 import Card from "@/components/Card";
 import Container from "@/components/Container";
+import Error from "@/components/Error";
 import Pagination from "@/components/Pagination";
 import { Spinner } from "@/components/Spinner";
+import PlayerRanking from "@/components/player/PlayerRanking";
 import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
-import { formatNumber } from "@/utils/number";
 import { fetchTopPlayers } from "@/utils/scoresaber/api";
-import Image from "next/image";
-import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useCallback, useEffect, useState } from "react";
 
@@ -20,7 +18,7 @@ type PageInfo = {
   players: ScoresaberPlayer[];
 };
 
-export default function Player({ params }: { params: { id: string } }) {
+export default function RankingGlobal() {
   const searchParams = useSearchParams();
   const router = useRouter();
 
@@ -77,7 +75,7 @@ export default function Player({ params }: { params: { id: string } }) {
     if (!pageInfo.loading || error) return;
 
     updatePage(pageInfo.page);
-  }, [error, params.id, updatePage, pageInfo.page, pageInfo.loading]);
+  }, [error, updatePage, pageInfo.page, pageInfo.loading]);
 
   if (pageInfo.loading || error) {
     return (
@@ -86,20 +84,10 @@ export default function Player({ params }: { params: { id: string } }) {
           <Card className="mt-2">
             <div className="p-3 text-center">
               <div role="status">
-                {pageInfo.loading && <Spinner />}
-
-                {error && (
-                  <div className="flex flex-col items-center justify-center gap-2">
-                    <p className="text-xl text-red-500">{errorMessage}</p>
-
-                    <Image
-                      alt="Sad cat"
-                      src={"https://cdn.fascinated.cc/BxI9iJI9.jpg"}
-                      width={200}
-                      height={200}
-                    />
-                  </div>
-                )}
+                <div className="flex flex-col items-center justify-center gap-2">
+                  {error && <Error errorMessage={errorMessage} />}
+                  {!error && <Spinner />}
+                </div>
               </div>
             </div>
           </Card>
@@ -133,30 +121,7 @@ export default function Player({ params }: { params: { id: string } }) {
               <tbody className="border-none">
                 {players.map((player) => (
                   <tr key={player.rank} className="border-b border-gray-700">
-                    <td className="px-4 py-2">#{formatNumber(player.rank)}</td>
-                    <td className="flex gap-2 px-4 py-2">
-                      <Avatar
-                        url={player.profilePicture}
-                        label="Avatar"
-                        size={24}
-                      />{" "}
-                      <Link
-                        className="transform-gpu transition-all hover:text-blue-500"
-                        href={"/player/" + player.id}
-                      >
-                        <p>{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>
+                    <PlayerRanking player={player} />
                   </tr>
                 ))}
               </tbody>