Basic App.js with UI components that reflects switch between multiple languages.

App.js

import React from "react";
import * as Mui from "@mui/material";
import { useTranslation } from "react-i18next";
import en from "./assets/images/en.svg";
import no from "./assets/images/no.svg";

function App() {
  const { i18n, t } = useTranslation();

  const setLocale = (lng) => {
    i18n.changeLanguage(lng);
  };

  return (
    <Mui.Container className="mt-2 h-100vh" fixed>
      <Mui.Box display="flex" justifyContent={"flex-end"} className="mb-3">
        <Mui.Button
          className={`mr-2 ${
            i18n.language === "en"
              ? "border-1 border-color-danger border-rad-4 text-color-danger"
              : "text-color-black"
          }`}
          onClick={() => setLocale("en")}
        >
          <span className="d-flex">
            <img src={en} alt="" className="img-fluid mr-1" />
            EN
          </span>
        </Mui.Button>
        <Mui.Button
          className={`${
            i18n.language === "no"
              ? "border-1 border-color-danger border-rad-4 text-color-danger"
              : "text-color-black"
          }`}
          onClick={() => setLocale("no")}
        >
          <span className="d-flex">
            <img src={no} alt="" className="img-fluid mr-1" />
            NO
          </span>
        </Mui.Button>
      </Mui.Box>
      <Mui.Box
        display="flex"
        flexDirection="column"
        justifyContent="center"
        alignItems="center"
      >
        <Mui.Typography
          component="h2"
          variant="h2"
          className="mb-3 font-weight-bold"
          textAlign="center"
        >
          {t("APP.WELCOME")}
        </Mui.Typography>

        <Mui.Typography
          component="h3"
          variant="h3"
          className="mb-3 font-weight-medium"
          textAlign="center"
        >
          {t("APP.TITLE")}
        </Mui.Typography>
        <Mui.Typography
          component="p"
          variant="p"
          className="mb-2 font-weight-normal"
          textAlign={"justify"}
        >
          {t("APP.SUBTITLE")}
        </Mui.Typography>
        <Mui.Typography
          component="p"
          variant="p"
          className="font-weight-normal"
          textAlign={"justify"}
        >
          {t("APP.DESCRIPTION")}
        </Mui.Typography>
      </Mui.Box>
    </Mui.Container>
  );
}

export default App;