prettyify country codes

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

@@ -8,6 +8,7 @@ import { Spinner } from "@/components/Spinner";
 import PlayerRanking from "@/components/player/PlayerRanking";
 import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
 import { fetchTopPlayers } from "@/utils/scoresaber/api";
+import { normalizedRegionName } from "@/utils/utils";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useCallback, useEffect, useState } from "react";
 import ReactCountryFlag from "react-country-flag";
@@ -121,7 +122,9 @@ export default function RankingCountry({
                   svg
                   className="!h-8 !w-8"
                 />
-                <p>You are viewing scores from {country}</p>
+                <p>
+                  You are viewing scores from {normalizedRegionName(country)}
+                </p>
               </div>
 
               <table className="w-full table-auto border-spacing-2 border-none text-left">

src/utils/utils.ts

@@ -1,3 +1,15 @@
+let regionNames = new Intl.DisplayNames(["en"], { type: "region" });
+
 export function isProduction() {
   return process.env.NODE_ENV === "production";
 }
+
+/**
+ * Returns the normalized region name
+ *
+ * @param region the region to normalize
+ * @returns the normalized region name
+ */
+export function normalizedRegionName(region: string) {
+  return regionNames.of(region);
+}