use local assets for flags

src/components/CountryFlag.tsx

@@ -0,0 +1,24 @@
+import { normalizedRegionName } from "@/utils/utils";
+import Image from "next/image";
+
+type CountryFlagProps = {
+  className?: string;
+  countryCode: string;
+};
+
+export default function CountyFlag({
+  className,
+  countryCode,
+}: CountryFlagProps) {
+  return (
+    <Image
+      src={`/assets/flags/${countryCode.toLowerCase()}.svg`}
+      alt={`${normalizedRegionName(countryCode)} flag`}
+      title={normalizedRegionName(countryCode)}
+      width={64}
+      height={64}
+      className={className}
+      priority
+    />
+  );
+}

src/components/player/GlobalRanking.tsx

@@ -8,12 +8,12 @@ import Link from "next/link";
 import { useCallback, useEffect, useState } from "react";
 import Card from "../Card";
 import Container from "../Container";
+import CountyFlag from "../CountryFlag";
 import Pagination from "../Pagination";
 import Spinner from "../Spinner";
 import PlayerRanking from "./PlayerRanking";
 import PlayerRankingMobile from "./PlayerRankingMobile";
 
-const ReactCountryFlag = dynamic(() => import("react-country-flag"));
 const Error = dynamic(() => import("@/components/Error"));
 
 type PageInfo = {
@@ -107,11 +107,7 @@ export default function GlobalRanking({ page, country }: GlobalRankingProps) {
             <div className="flex flex-col gap-2">
               <div className="flex items-center gap-2 rounded-md bg-gray-700 p-2">
                 {country && (
-                  <ReactCountryFlag
-                    countryCode={country}
-                    svg
-                    className="!h-8 !w-8"
-                  />
+                  <CountyFlag countryCode={country} className="!h-8 !w-8" />
                 )}
                 <p>
                   You are viewing{" "}

src/components/player/PlayerInfo.tsx

@@ -14,16 +14,14 @@ import {
   UserIcon,
   XMarkIcon,
 } from "@heroicons/react/20/solid";
-import dynamic from "next/dynamic";
 import { useRef } from "react";
 import { toast } from "react-toastify";
 import { useStore } from "zustand";
 import Avatar from "../Avatar";
 import Card from "../Card";
+import CountyFlag from "../CountryFlag";
 import Label from "../Label";
 
-const ReactCountryFlag = dynamic(() => import("react-country-flag"));
-
 type PlayerInfoProps = {
   playerData: ScoresaberPlayer;
 };
@@ -188,11 +186,9 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
                   playerData.country,
                 )}`}
               >
-                <ReactCountryFlag
+                <CountyFlag
                   countryCode={playerData.country}
-                  svg
                   className="!h-7 !w-7"
-                  alt="Country Flag"
                 />
                 <p>#{formatNumber(playerData.countryRank)}</p>
               </a>

src/components/player/PlayerRanking.tsx

@@ -4,13 +4,13 @@ import { formatNumber } from "@/utils/number";
 import dynamic from "next/dynamic";
 import Link from "next/link";
 import { useStore } from "zustand";
+import CountyFlag from "../CountryFlag";
 
 type PlayerRankingProps = {
   player: ScoresaberPlayer;
   showCountryFlag?: boolean;
 };
 
-const ReactCountryFlag = dynamic(() => import("react-country-flag"));
 const Avatar = dynamic(() => import("@/components/Avatar"));
 
 export default function PlayerRanking({
@@ -25,11 +25,7 @@ export default function PlayerRanking({
       <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"
-          />
+          <CountyFlag countryCode={player.country} className="!h-5 !w-5" />
         )}
         <Link
           className="transform-gpu transition-all hover:text-blue-500"
@@ -46,7 +42,7 @@ export default function PlayerRanking({
           </p>
         </Link>
       </td>
-      <td className="text-pp-blue px-4 py-2">{formatNumber(player.pp)}pp</td>
+      <td className="px-4 py-2 text-pp-blue">{formatNumber(player.pp)}pp</td>
       <td className="px-4 py-2">
         {formatNumber(player.scoreStats.totalPlayCount)}
       </td>

src/components/player/PlayerRankingMobile.tsx

@@ -1,9 +1,9 @@
 import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
 import { useSettingsStore } from "@/store/settingsStore";
 import { formatNumber } from "@/utils/number";
-import dynamic from "next/dynamic";
 import { useStore } from "zustand";
 import Avatar from "../Avatar";
+import CountyFlag from "../CountryFlag";
 import Label from "../Label";
 
 type PlayerRankingProps = {
@@ -11,8 +11,6 @@ type PlayerRankingProps = {
   showCountryFlag?: boolean;
 };
 
-const ReactCountryFlag = dynamic(() => import("react-country-flag"));
-
 export default function PlayerRankingMobile({
   player,
   showCountryFlag = true,
@@ -26,11 +24,7 @@ export default function PlayerRankingMobile({
           <p>#{formatNumber(player.rank)}</p>
           <Avatar url={player.profilePicture} label="Avatar" size={24} />
           {showCountryFlag && (
-            <ReactCountryFlag
-              countryCode={player.country}
-              svg
-              className="!h-5 !w-5"
-            />
+            <CountyFlag countryCode={player.country} className="!h-5 !w-5" />
           )}
           <p
             className={