dont show country flags on country ranking page

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

@@ -20,11 +20,11 @@ type PageInfo = {
   players: ScoresaberPlayer[];
 };
 
-export default function RankingCountry({
-  params,
-}: {
+type RankingCountryProps = {
   params: { country: string };
-}) {
+};
+
+export default function RankingCountry({ params }: RankingCountryProps) {
   const searchParams = useSearchParams();
   const router = useRouter();
 
@@ -141,7 +141,7 @@ export default function RankingCountry({
                 <tbody className="border-none">
                   {players.map((player) => (
                     <tr key={player.rank} className="border-b border-gray-700">
-                      <PlayerRanking player={player} />
+                      <PlayerRanking showCountryFlag={false} player={player} />
                     </tr>
                   ))}
                 </tbody>

src/components/player/PlayerRanking.tsx

@@ -8,9 +8,13 @@ import Avatar from "../Avatar";
 
 type PlayerRankingProps = {
   player: ScoresaberPlayer;
+  showCountryFlag?: boolean;
 };
 
-export default function PlayerRanking({ player }: PlayerRankingProps) {
+export default function PlayerRanking({
+  player,
+  showCountryFlag,
+}: PlayerRankingProps) {
   const settingsStore = useStore(useSettingsStore, (store) => store);
 
   return (
@@ -18,11 +22,13 @@ export default function PlayerRanking({ player }: PlayerRankingProps) {
       <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} />
+        {showCountryFlag && (
           <ReactCountryFlag
             countryCode={player.country}
             svg
             className="!h-5 !w-5"
           />
+        )}
         <Link
           className="transform-gpu transition-all hover:text-blue-500"
           href={"/player/" + player.id}