✨ Build a language switcher component

src/components/Settings/LanguageSwitcher.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="language-switcher">
+    <h3 class="title">Change Application Language</h3>
+    <p class="intro">Select a Language:</p>
+    <v-select
+      v-model="language"
+      :selectOnTab="true"
+      :options="availibleLanguages"
+      class="language-dropdown"
+      label="name"
+      :input="setLangLocally()"
+    />
+    <Button class="save-button" :click="saveLanguage" :disallow="!language">
+      Save
+      <SaveConfigIcon />
+    </Button>
+    <p v-if="language">{{ language.flag }} {{ language.name }}</p>
+  </div>
+</template>
+
+<script>
+import Button from '@/components/FormElements/Button';
+import { languages } from '@/utils/languages';
+import SaveConfigIcon from '@/assets/interface-icons/save-config.svg';
+import { localStorageKeys } from '@/utils/defaults';
+
+export default {
+  name: 'LanguageSwitcher',
+  inject: ['config'],
+  components: {
+    Button,
+    SaveConfigIcon,
+  },
+  data() {
+    return {
+      availibleLanguages: languages,
+      language: '',
+    };
+  },
+  methods: {
+    saveLanguage() {
+      const selectedLanguage = this.language;
+      if (this.checkLocale(selectedLanguage)) {
+        localStorage.setItem(localStorageKeys.LANGUAGE, selectedLanguage.code);
+        this.setLangLocally();
+        const successMsg = `${selectedLanguage.flag} Language Updated to ${selectedLanguage.name}`;
+        this.$toasted.show(successMsg, { className: 'toast-success' });
+      }
+    },
+    checkLocale(selectedLanguage) {
+      if (!selectedLanguage || !selectedLanguage.code) return false;
+      const i18nLocales = this.$i18n.availableLocales;
+      return i18nLocales.includes(selectedLanguage.code);
+    },
+    setLangLocally() {
+      if (this.language && this.language.code) {
+        this.$i18n.locale = this.language.code;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+
+.language-switcher {
+  height: 100%;
+  margin: 0;
+  padding: 1rem;
+  background: var(--config-settings-background);
+  color: var(--config-settings-color);
+
+  h3.title {
+    text-align: center;
+  }
+  p.intro {
+    margin: 0;
+  }
+
+  button.save-button {
+    margin: 0 auto;
+    width: 100%;
+  }
+
+  .language-dropdown {
+    margin: 1rem auto;
+    div.vs__dropdown-toggle {
+      padding: 0.2rem 0;
+    }
+  }
+}
+
+</style>