Use Flag SVG images

dgmstuart · Apr 21, 2024 · 4e4b373 · 4e4b373
1 parent 607de33
commit 4e4b373
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 17 deletions.
diff --git a/src/components/LanguagePicker.css b/src/components/LanguagePicker.css
@@ -4,6 +4,7 @@
   right: 0;
   padding: 15px;
   text-align: right;
+  font-size: calc(2vmin + 10px);
 }
 
 .LanguagePicker ul {
@@ -15,15 +16,13 @@
 .LanguagePicker .current {
   background-color: white;
   border-radius: 50%;
-  border: 1px solid dimgray;
   width: min-content;
-  padding: 15px;
+  height: 2em; /* needs to match width of Flag */
+  overflow: hidden;
   margin-left: auto; /* shouldn't be required? */
-  width: 1em;
-  height: 1em;
   display: flex;
   align-items: center;
-  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.50);
+  box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.50);
 }
 
 .LanguagePicker .menu {
@@ -32,16 +31,34 @@
   margin-bottom: 10px;
   border-radius: 5px;
   padding: 15px;
-  border: 1px solid dimgray;
-  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.50);
+  box-shadow: 0 6px 14px 0 rgba(0, 0, 0, 0.50);
 }
 
 .LanguagePicker .menu.open {
   display: flex;
   flex-direction: column;
-  row-gap: 8px;
+  row-gap: 20px;
+}
+
+.LanguagePicker .menuItem {
+  display: flex;
+  align-items: center;
+  justify-content: end;
 }
 
-.LanguagePicker .menu .currentMenuItem {
+.LanguagePicker .menuItem .text{
+  margin-right: 0.5em;
+}
+
+.LanguagePicker .menuItem .Flag{
+  border-radius: 2px;
+}
+
+.LanguagePicker .currentMenuItem {
   font-weight: bold;
 }
+
+.Flag {
+  width: 2em;
+  overflow: hidden;
+}
diff --git a/src/components/LanguagePicker.tsx b/src/components/LanguagePicker.tsx
@@ -8,12 +8,12 @@ import type { SupportedLanguageCode } from "../i18n";
 import type { ClickHandler } from "../clickHandler";
 
 type MenuClickHandler = ClickHandler<HTMLDivElement>;
-type LanguageData = { text: string; emoji: string };
+type LanguageData = { text: string; flagCode: string };
 
 const languages: { [key in SupportedLanguageCode]: LanguageData } = {
-  en: { text: "English", emoji: "🇬🇧" },
-  fr: { text: "Francais", emoji: "🇫🇷" },
-  sv: { text: "Svenska", emoji: "🇸🇪" },
+  en: { text: "English", flagCode: "GB" },
+  fr: { text: "Francais", flagCode: "FR" },
+  sv: { text: "Svenska", flagCode: "SE" },
 };
 
 const LanguagePicker: React.FC = () => {
@@ -38,7 +38,7 @@ const LanguagePicker: React.FC = () => {
         ))}
       </ul>
       <div className="current" onClick={toggleOpen}>
-        {currentLanguage.emoji}
+        <Flag language={currentLanguage} aspectRatio={"1x1"} />
       </div>
     </div>
   );
@@ -49,7 +49,8 @@ const LanguageOption: React.FC<{
   isCurrent: boolean;
   closeMenu: () => void;
 }> = ({ languageCode, isCurrent, closeMenu }) => {
-  const { text, emoji } = languages[languageCode as SupportedLanguageCode];
+  const language = languages[languageCode as SupportedLanguageCode];
+  const { text } = language;
   const { i18n } = useTranslation();
 
   const setLanguage = async (language: string | undefined) => {
@@ -65,12 +66,24 @@ const LanguageOption: React.FC<{
 
   return (
     <li
-      className={classNames({ currentMenuItem: isCurrent })}
+      className={classNames("menuItem", { currentMenuItem: isCurrent })}
       onClick={clickHandler}
     >
-      <span className="text">{text}</span> {emoji}
+      <span className="text">{text}</span>{" "}
+      <Flag language={language} aspectRatio={"3x2"} />
     </li>
   );
 };
 
+type AspectRatio = "1x1" | "3x2";
+const Flag: React.FC<{ language: LanguageData; aspectRatio: AspectRatio }> = ({
+  language,
+  aspectRatio,
+}) => {
+  const { flagCode, text } = language;
+  const flagUrl = `http://purecatamphetamine.github.io/country-flag-icons/${aspectRatio}/${flagCode}.svg`;
+
+  return <img className="Flag" alt={text} src={flagUrl} />;
+};
+
 export default LanguagePicker;