make ranking pages mobile friendly

src/app/ranking/country/[country]/page.tsx

@@ -6,9 +6,11 @@ import Error from "@/components/Error";
 import Pagination from "@/components/Pagination";
 import { Spinner } from "@/components/Spinner";
 import PlayerRanking from "@/components/player/PlayerRanking";
+import PlayerRankingMobile from "@/components/player/PlayerRankingMobile";
 import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
 import { fetchTopPlayers } from "@/utils/scoresaber/api";
 import { normalizedRegionName } from "@/utils/utils";
+import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useCallback, useEffect, useState } from "react";
 import ReactCountryFlag from "react-country-flag";
@@ -127,7 +129,7 @@ export default function RankingCountry({ params }: RankingCountryProps) {
                 </p>
               </div>
 
-              <table className="w-full table-auto border-spacing-2 border-none text-left">
+              <table className="hidden w-full table-auto border-spacing-2 border-none text-left md:table">
                 <thead>
                   <tr>
                     <th className="px-4 py-2">Rank</th>
@@ -146,8 +148,19 @@ export default function RankingCountry({ params }: RankingCountryProps) {
                   ))}
                 </tbody>
               </table>
+
+              <div className="flex flex-col gap-2 md:hidden">
+                {players.map((player) => (
+                  <div
+                    key={player.rank}
+                    className="flex flex-col gap-2 rounded-md bg-gray-700 hover:bg-gray-600"
+                  >
+                    <Link href={`/player/${player.id}`}>
+                      <PlayerRankingMobile player={player} />
+                    </Link>
+                  </div>
+                ))}
               </div>
-          )}
 
               {/* Pagination */}
               <div className="flex w-full flex-row justify-center rounded-md bg-gray-800 md:flex-col">
@@ -161,6 +174,8 @@ export default function RankingCountry({ params }: RankingCountryProps) {
                   />
                 </div>
               </div>
+            </div>
+          )}
         </Card>
       </Container>
     </main>

src/app/ranking/global/page.tsx

@@ -6,9 +6,11 @@ import Error from "@/components/Error";
 import Pagination from "@/components/Pagination";
 import { Spinner } from "@/components/Spinner";
 import PlayerRanking from "@/components/player/PlayerRanking";
+import PlayerRankingMobile from "@/components/player/PlayerRankingMobile";
 import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
 import { fetchTopPlayers } from "@/utils/scoresaber/api";
 import { GlobeAsiaAustraliaIcon } from "@heroicons/react/20/solid";
+import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useCallback, useEffect, useState } from "react";
 
@@ -113,7 +115,7 @@ export default function RankingGlobal() {
                 <GlobeAsiaAustraliaIcon width={32} height={32} />
                 <p>You are viewing Global scores</p>
               </div>
-              <table className="w-full table-auto border-spacing-2 border-none text-left">
+              <table className="hidden w-full table-auto border-spacing-2 border-none text-left md:table">
                 <thead>
                   <tr>
                     <th className="px-4 py-2">Rank</th>
@@ -132,8 +134,19 @@ export default function RankingGlobal() {
                   ))}
                 </tbody>
               </table>
+
+              <div className="flex flex-col gap-2 md:hidden">
+                {players.map((player) => (
+                  <div
+                    key={player.rank}
+                    className="flex flex-col gap-2 rounded-md bg-gray-700 hover:bg-gray-600"
+                  >
+                    <Link href={`/player/${player.id}`}>
+                      <PlayerRankingMobile player={player} />
+                    </Link>
+                  </div>
+                ))}
               </div>
-          )}
 
               {/* Pagination */}
               <div className="flex w-full flex-row justify-center rounded-md bg-gray-800 md:flex-col">
@@ -147,6 +160,8 @@ export default function RankingGlobal() {
                   />
                 </div>
               </div>
+            </div>
+          )}
         </Card>
       </Container>
     </main>

src/components/player/PlayerRankingMobile.tsx

@@ -0,0 +1,58 @@
+import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
+import { useSettingsStore } from "@/store/settingsStore";
+import { formatNumber } from "@/utils/number";
+import ReactCountryFlag from "react-country-flag";
+import { useStore } from "zustand";
+import Avatar from "../Avatar";
+import Label from "../Label";
+
+type PlayerRankingProps = {
+  player: ScoresaberPlayer;
+  showCountryFlag?: boolean;
+};
+
+export default function PlayerRankingMobile({
+  player,
+  showCountryFlag = true,
+}: PlayerRankingProps) {
+  const settingsStore = useStore(useSettingsStore, (store) => store);
+
+  return (
+    <div>
+      <div className="m-3 flex flex-col gap-2">
+        <p className="flex items-center gap-2">
+          <p>#{formatNumber(player.rank)}</p>
+          <Avatar url={player.profilePicture} label="Avatar" size={24} />
+          {showCountryFlag && (
+            <ReactCountryFlag
+              countryCode={player.country}
+              svg
+              className="!h-5 !w-5"
+            />
+          )}
+          <p
+            className={
+              player.id == settingsStore?.userId
+                ? "transform-gpu text-red-500 transition-all hover:text-blue-500"
+                : ""
+            }
+          >
+            {player.name}
+          </p>
+        </p>
+        <div className="flex flex-wrap justify-center gap-2">
+          <Label
+            title="PP"
+            hoverValue="Total amount of pp"
+            value={`${formatNumber(player.pp)}`}
+          />
+          <Label
+            title="Total play count"
+            hoverValue="Total ranked song play count"
+            value={formatNumber(player.scoreStats.totalPlayCount)}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}