Feature/auto generate crowdin data (#1071)

* add translated key

* update code generation for crowdin generation

* use composition api and minor styling changes

frontend/composables/use-locales/available-locales.ts

@@ -0,0 +1,168 @@
+// This Code is auto generated by gen_global_components.py
+export const LOCALES = [
+  {
+    name: "繁體中文 (Chinese traditional)",
+    value: "zh-TW",
+    progress: 100,
+  },
+  {
+    name: "简体中文 (Chinese simplified)",
+    value: "zh-CN",
+    progress: 100,
+  },
+  {
+    name: "Tiếng Việt (Vietnamese)",
+    value: "vi-VN",
+    progress: 0,
+  },
+  {
+    name: "Українська (Ukrainian)",
+    value: "uk-UA",
+    progress: 100,
+  },
+  {
+    name: "Türkçe (Turkish)",
+    value: "tr-TR",
+    progress: 7,
+  },
+  {
+    name: "Svenska (Swedish)",
+    value: "sv-SE",
+    progress: 100,
+  },
+  {
+    name: "српски (Serbian)",
+    value: "sr-SP",
+    progress: 0,
+  },
+  {
+    name: "Slovak",
+    value: "sk-SK",
+    progress: 100,
+  },
+  {
+    name: "Pусский (Russian)",
+    value: "ru-RU",
+    progress: 100,
+  },
+  {
+    name: "Română (Romanian)",
+    value: "ro-RO",
+    progress: 0,
+  },
+  {
+    name: "Português (Portugese)",
+    value: "pt-PT",
+    progress: 15,
+  },
+  {
+    name: "Português do Brasil (Brazilian Portuguese)",
+    value: "pt-BR",
+    progress: 64,
+  },
+  {
+    name: "Polski (Polish)",
+    value: "pl-PL",
+    progress: 100,
+  },
+  {
+    name: "Norsk (Norwegian)",
+    value: "no-NO",
+    progress: 100,
+  },
+  {
+    name: "Nederlands (Dutch)",
+    value: "nl-NL",
+    progress: 100,
+  },
+  {
+    name: "한국어 (Korean)",
+    value: "ko-KR",
+    progress: 0,
+  },
+  {
+    name: "日本語 (Japanese)",
+    value: "ja-JP",
+    progress: 0,
+  },
+  {
+    name: "Italiano (Italian)",
+    value: "it-IT",
+    progress: 99,
+  },
+  {
+    name: "Magyar (Hungarian)",
+    value: "hu-HU",
+    progress: 100,
+  },
+  {
+    name: "עברית (Hebrew)",
+    value: "he-IL",
+    progress: 0,
+  },
+  {
+    name: "Français (French)",
+    value: "fr-FR",
+    progress: 100,
+  },
+  {
+    name: "French, Canada",
+    value: "fr-CA",
+    progress: 100,
+  },
+  {
+    name: "Suomi (Finnish)",
+    value: "fi-FI",
+    progress: 0,
+  },
+  {
+    name: "Español (Spanish)",
+    value: "es-ES",
+    progress: 100,
+  },
+  {
+    name: "American English",
+    value: "en-US",
+    progress: 100.0,
+  },
+  {
+    name: "British English",
+    value: "en-GB",
+    progress: 100,
+  },
+  {
+    name: "Ελληνικά (Greek)",
+    value: "el-GR",
+    progress: 100,
+  },
+  {
+    name: "Deutsch (German)",
+    value: "de-DE",
+    progress: 100,
+  },
+  {
+    name: "Dansk (Danish)",
+    value: "da-DK",
+    progress: 100,
+  },
+  {
+    name: "Čeština (Czech)",
+    value: "cs-CZ",
+    progress: 0,
+  },
+  {
+    name: "Català (Catalan)",
+    value: "ca-ES",
+    progress: 100,
+  },
+  {
+    name: "العربية (Arabic)",
+    value: "ar-SA",
+    progress: 4,
+  },
+  {
+    name: "Afrikaans (Afrikaans)",
+    value: "af-ZA",
+    progress: 0,
+  },
+];

frontend/composables/use-locales/index.ts

@@ -0,0 +1 @@
+export { useLocales } from "./use-locales";

frontend/composables/use-locales/use-locales.ts

@@ -0,0 +1,23 @@
+import { computed, useContext } from "@nuxtjs/composition-api";
+import { LOCALES } from "./available-locales";
+
+export const useLocales = () => {
+  const { i18n } = useContext();
+
+  const locale = computed<string>({
+    get() {
+      return i18n.locale;
+    },
+    set(value) {
+      i18n.setLocale(value);
+      // Reload the page to update the language - not all strings are reactive
+      window.location.reload();
+    },
+  });
+
+  return {
+    locale,
+    locales: LOCALES,
+    i18n,
+  };
+};