TypeScript localization

LocalizationDemo.tsx

import React, { useContext, useState } from "react";
import { BrowserRouter, Link } from "react-router-dom";
import { Route, Switch } from "react-router";
import { format, formatDistance, formatRelative } from "date-fns";
import nb from "date-fns/locale/nb";
import enUS from "date-fns/locale/en-US";

type AppLocale = "en" | "nb";

interface ApplicationTexts extends Record<AppLocale, string> {
  hello: string;
  home: string;
  pickLanguage: string;
}

const english: ApplicationTexts = {
  en: "English",
  hello: "Hello",
  home: "Home",
  nb: "Norwegian",
  pickLanguage: "Pick language",
};

const norwegian: ApplicationTexts = {
  en: "Engelsk",
  hello: "Hei",
  home: "Forside",
  nb: "Norsk",
  pickLanguage: "Velg språk",
};

const LanguageContext = React.createContext<{
  locale: AppLocale;
  texts: ApplicationTexts;
  setLocale(value: AppLocale): void;
}>({
  locale: "nb",
  texts: norwegian,
  // eslint-disable-next-line @typescript-eslint/no-empty-function
  setLocale: () => {},
});

const textLanguages: Record<AppLocale, ApplicationTexts> = {
  en: english,
  nb: norwegian,
};

const dateLocales: Record<AppLocale, Locale> = {
  en: enUS,
  nb: nb,
};

function RelativeTime({ date }: { date: Date }) {
  const { locale } = useContext(LanguageContext);
  return (
    <div>
      {formatDistance(date, new Date(), {
        addSuffix: true,
        locale: dateLocales[locale],
      })}
    </div>
  );
}

function Application() {
  const { texts, setLocale } = useContext(LanguageContext);
  return (
    <BrowserRouter>
      <header>
        <Link to={"/"}>{texts.home}</Link>
        <Link to={"/language"}>{texts.pickLanguage}</Link>
      </header>
      <Switch>
        <Route path={"/language"}>
          <div>
            <h1>{texts.pickLanguage}</h1>
            <div>
              <button onClick={() => setLocale("en")}>{texts.en}</button>
              <button onClick={() => setLocale("nb")}>{texts.nb}</button>
            </div>
          </div>
        </Route>
        <Route>
          <div>{texts.hello}</div>
        </Route>
      </Switch>
      <footer>
        <RelativeTime date={new Date(2021, 1, 1)} />
      </footer>
    </BrowserRouter>
  );
}

export function LocalizationDemo() {
  const [language, setLanguage] = useState<AppLocale>("en");

  return (
    <LanguageContext.Provider
      value={{
        texts: textLanguages[language],
        locale: language,
        setLocale: setLanguage,
      }}
    >
      <Application />
    </LanguageContext.Provider>
  );
}