added header to show what you are viewing

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,6 +114,16 @@ export default function RankingCountry({
               <Spinner />
             </div>
           ) : (
+            <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>
@@ -132,6 +143,7 @@ export default function RankingCountry({
                   ))}
                 </tbody>
               </table>
+            </div>
           )}
 
           {/* Pagination */}

src/app/ranking/global/page.tsx

@@ -107,6 +107,10 @@ export default function RankingGlobal() {
               <Spinner />
             </div>
           ) : (
+            <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>
@@ -126,6 +130,7 @@ export default function RankingGlobal() {
                   ))}
                 </tbody>
               </table>
+            </div>
           )}
 
           {/* Pagination */}