Add simple version of country flags

package.json

@@ -24,6 +24,7 @@
     "@mui/icons-material": "^5.15.9",
     "@mui/material": "^5.15.9",
     "@tanstack/react-query": "^5.18.1",
+    "flag-icons": "^7.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "usehooks-ts": "^2.14.0"

src/components/StreakView/User/CountryFlag/CountryFlag.module.less

@@ -0,0 +1,5 @@
+.country-flag {
+  background-size: contain;
+  background-position: 50%;
+  background-repeat: no-repeat;
+}

src/components/StreakView/User/CountryFlag/CountryFlag.tsx

@@ -0,0 +1,34 @@
+import { useMemo } from "react";
+import styles from "./CountryFlag.module.less";
+import "/node_modules/flag-icons/css/flag-icons.min.css";
+
+type CountryFlagProps = {
+  countryCode?: string;
+};
+/**
+ * Country flags implemented using the flag-icons library.
+ */
+export const CountryFlag = (props: CountryFlagProps) => {
+  const countryCode = useMemo(
+    () => manuallyCorrectCountryCode(props.countryCode),
+    [props.countryCode],
+  );
+
+  if (!countryCode) {
+    return null;
+  }
+
+  return <div className={`${styles.countryFlag} fi fi-${countryCode}`}></div>;
+};
+
+/**
+ * The language code returned by the DuoLingo API is not always the same as the one used by the flag-icons library.
+ */
+const manuallyCorrectCountryCode = (languageCode?: string) => {
+  switch (languageCode) {
+    case "ja":
+      return "jp";
+    default:
+      return languageCode;
+  }
+};

src/components/StreakView/User/User.module.less

@@ -1,4 +1,4 @@
-.user {
+.container {
   display: flex;
   flex-direction: column;
   align-items: center;

src/components/StreakView/User/User.tsx

@@ -1,5 +1,6 @@
 import { useUserData } from "../../../hooks/useUserData";
 import { proxyify } from "../../../utilities";
+import { CountryFlag } from "./CountryFlag/CountryFlag";
 import { FireBorder } from "./FireBorder/FireBorder";
 import { StreakBlock } from "./StreakBlock/StreakBlock";
 import styles from "./User.module.less";
@@ -20,16 +21,19 @@ export const User = (props: UserProps) => {
 
   return (
     <FireBorder enabled={user.streak.didALessonToday()}>
-      <div className={styles.user}>
+      <div className={styles.container}>
         <h2>{user.name}</h2>
-        <i>({user.currentCourse?.title})</i>
-        <img
-          className={styles.avatar}
-          alt={user.name}
-          src={proxyify(user.pictureUrl)}
-        />
+        <i>{user.currentCourse?.title}</i>
+        <CountryFlag countryCode={user.currentCourse?.languageCode} />
+        <Avatar url={user.pictureUrl} name={user.name} />
         <StreakBlock days={user.streak.days} />
       </div>
     </FireBorder>
   );
 };
+
+const Avatar = (props: { url: string; name: string }) => {
+  return (
+    <img className={styles.avatar} alt={props.name} src={proxyify(props.url)} />
+  );
+};