translate event page contents

src/components/ChangeLanguageButton.tsx

@@ -1,14 +1,20 @@
 import React from "react";
-import i18nNext, { useTranslation } from "../i18n";
-
-const ChangeLanguageButton: React.FC = () => {
-  const { t } = useTranslation();
-
-  const { i18n } = i18nNext;
+import styled from "styled-components";
+import i18nNext from "../i18n";
+import Icon, { IconType } from "./Icon";
 
+const ChangeLanguageButton: React.FC = (props) => {
+  const { language, changeLanguage } = i18nNext.i18n;
   return (
-    <button type="button" onClick={() => i18n.changeLanguage(i18n.language === "fi" ? "en" : "fi")}>{t("lngButton")}</button>
+    <button {...props} type="button" onClick={() => changeLanguage(language === "fi" ? "en" : "fi")}>
+      <Icon name={language === "fi" ? IconType.GBFlag : IconType.FinlandFlag} />
+    </button>
   );
 };
 
-export default ChangeLanguageButton;
+export default styled(ChangeLanguageButton)`
+  font-size: 4rem;
+  background: none;
+  border: none;
+  width: fit-content;
+`;

src/components/Icon.tsx

@@ -69,10 +69,18 @@ const nameToIcon = (name: IconType): JSX.Element | string => {
     );
   }
   if (name === IconType.FinlandFlag) {
-    return "🇫🇮";
+    return (
+      <span role="img">
+        🇫🇮
+      </span>
+    );
   }
   if (name === IconType.GBFlag) {
-    return "🇬🇧";
+    return (
+      <span role="img">
+        🇬🇧
+      </span>
+    );
   }
   return null;
 };

src/components/index.tsx

@@ -10,3 +10,4 @@ export { default as InfoBox } from "./InfoBox";
 export { default as Accordion } from "./Accordion/Accordion";
 export { default as Link } from "./Link";
 export { default as CrossFadeImages } from "./CrossFadeImages";
+export { default as ChangeLanguageButton } from "./ChangeLanguageButton";