From 21cb7aaf8913d32c1b04a1cb8cf833dd08f38748 Mon Sep 17 00:00:00 2001
From: Liam <liam@fascinated.cc>
Date: Sun, 22 Oct 2023 06:18:49 +0100
Subject: [PATCH] added header to show what you are viewing

---
 src/app/ranking/country/[country]/page.tsx | 50 ++++++++++++++--------
 src/app/ranking/global/page.tsx            | 41 ++++++++++--------
 2 files changed, 54 insertions(+), 37 deletions(-)

diff --git a/src/app/ranking/country/[country]/page.tsx b/src/app/ranking/country/[country]/page.tsx
index 48a7045..5f4bf88 100644
--- a/src/app/ranking/country/[country]/page.tsx
+++ b/src/app/ranking/country/[country]/page.tsx
@@ -10,6 +10,7 @@ import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
 import { fetchTopPlayers } from "@/utils/scoresaber/api";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useCallback, useEffect, useState } from "react";
+import ReactCountryFlag from "react-country-flag";
 
 type PageInfo = {
   loading: boolean;
@@ -81,7 +82,7 @@ export default function RankingCountry({
     if (!pageInfo.loading || error) return;
 
     updatePage(pageInfo.page);
-  }, [error, params.country, updatePage, pageInfo.page, pageInfo.loading]);
+  }, [error, country, updatePage, pageInfo.page, pageInfo.loading]);
 
   if (pageInfo.loading || error) {
     return (
@@ -113,25 +114,36 @@ export default function RankingCountry({
               <Spinner />
             </div>
           ) : (
-            <table className="w-full table-auto border-spacing-2 border-none text-left">
-              <thead>
-                <tr>
-                  <th className="px-4 py-2">Rank</th>
-                  <th className="px-4 py-2">Profile</th>
-                  <th className="px-4 py-2">Performance Points</th>
-                  <th className="px-4 py-2">Total Plays</th>
-                  <th className="px-4 py-2">Total Ranked Plays</th>
-                  <th className="px-4 py-2">Avg Ranked Accuracy</th>
-                </tr>
-              </thead>
-              <tbody className="border-none">
-                {players.map((player) => (
-                  <tr key={player.rank} className="border-b border-gray-700">
-                    <PlayerRanking player={player} />
+            <div className="flex flex-col gap-2">
+              <div className="flex items-center gap-2 rounded-md bg-gray-700 p-2">
+                <ReactCountryFlag
+                  countryCode={country}
+                  svg
+                  className="!h-8 !w-8"
+                />
+                <p>You are viewing scores from {country}</p>
+              </div>
+
+              <table className="w-full table-auto border-spacing-2 border-none text-left">
+                <thead>
+                  <tr>
+                    <th className="px-4 py-2">Rank</th>
+                    <th className="px-4 py-2">Profile</th>
+                    <th className="px-4 py-2">Performance Points</th>
+                    <th className="px-4 py-2">Total Plays</th>
+                    <th className="px-4 py-2">Total Ranked Plays</th>
+                    <th className="px-4 py-2">Avg Ranked Accuracy</th>
                   </tr>
-                ))}
-              </tbody>
-            </table>
+                </thead>
+                <tbody className="border-none">
+                  {players.map((player) => (
+                    <tr key={player.rank} className="border-b border-gray-700">
+                      <PlayerRanking player={player} />
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
           )}
 
           {/* Pagination */}
diff --git a/src/app/ranking/global/page.tsx b/src/app/ranking/global/page.tsx
index 56a11f0..c161729 100644
--- a/src/app/ranking/global/page.tsx
+++ b/src/app/ranking/global/page.tsx
@@ -107,25 +107,30 @@ export default function RankingGlobal() {
               <Spinner />
             </div>
           ) : (
-            <table className="w-full table-auto border-spacing-2 border-none text-left">
-              <thead>
-                <tr>
-                  <th className="px-4 py-2">Rank</th>
-                  <th className="px-4 py-2">Profile</th>
-                  <th className="px-4 py-2">Performance Points</th>
-                  <th className="px-4 py-2">Total Plays</th>
-                  <th className="px-4 py-2">Total Ranked Plays</th>
-                  <th className="px-4 py-2">Avg Ranked Accuracy</th>
-                </tr>
-              </thead>
-              <tbody className="border-none">
-                {players.map((player) => (
-                  <tr key={player.rank} className="border-b border-gray-700">
-                    <PlayerRanking player={player} />
+            <div className="flex flex-col gap-2">
+              <div className="flex items-center gap-2 rounded-md bg-gray-700 p-2">
+                <p>You are viewing Global scores</p>
+              </div>
+              <table className="w-full table-auto border-spacing-2 border-none text-left">
+                <thead>
+                  <tr>
+                    <th className="px-4 py-2">Rank</th>
+                    <th className="px-4 py-2">Profile</th>
+                    <th className="px-4 py-2">Performance Points</th>
+                    <th className="px-4 py-2">Total Plays</th>
+                    <th className="px-4 py-2">Total Ranked Plays</th>
+                    <th className="px-4 py-2">Avg Ranked Accuracy</th>
                   </tr>
-                ))}
-              </tbody>
-            </table>
+                </thead>
+                <tbody className="border-none">
+                  {players.map((player) => (
+                    <tr key={player.rank} className="border-b border-gray-700">
+                      <PlayerRanking player={player} />
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
           )}
 
           {/* Pagination */}