feat: add more langs and lang switcher

package.json

@@ -41,6 +41,7 @@
     "eslint": "^8.52.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-vue": "^9.17.0",
+    "naive-ui": "^2.35.0",
     "pinia": "^2.1.7",
     "postcss": "^8.4.31",
     "prettier": "^3.0.3",

src/components/Footer.vue

@@ -3,15 +3,7 @@ import IconGithub from '@/components/icons/IconGithub.vue'
 import IconHeart from '@/components/icons/IconHeart.vue'
 import IconTelegram from '@/components/icons/IconTelegram.vue'
 import IconTwitch from '@/components/icons/IconTwitch.vue'
-import { useI18n } from 'vue-i18n'
-
-const { locale } = useI18n()
-let localStorageLang = localStorage.getItem('valoryLocale')
-const switchLang = () => {
-  locale.value === 'en' ? (locale.value = 'ru') : (locale.value = 'en')
-  localStorage.setItem('valoryLocale', locale.value)
-  localStorageLang = localStorage.getItem('valoryLocale')
-}
+import LanguageSwitcher from '@/components/ui/LanguageSwitcher.vue'
 </script>
 
 <template>
@@ -41,11 +33,8 @@ const switchLang = () => {
         </a>
       </li>
       <li class="social">
-        <a v-if="localStorageLang === 'en'" target="__blank" @click="switchLang">
-          <Icon icon="flag:ru-4x3" width="18" height="18" />
-        </a>
-        <a v-else target="__blank" @click="switchLang">
-          <Icon icon="flag:us-4x3" width="18" height="18" />
+        <a target="__blank">
+          <LanguageSwitcher />
         </a>
       </li>
     </ul>

src/components/ui/LanguageSwitcher.vue

@@ -0,0 +1,35 @@
+<script setup>
+import { useLocalStorage } from '@vueuse/core'
+import { NConfigProvider, NDropdown, darkTheme } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
+
+const { locale, availableLocales } = useI18n()
+const localStorageLocale = useLocalStorage('valoryLocale', 'en')
+</script>
+
+<template>
+  <div>
+    <n-config-provider :theme="darkTheme">
+      <n-dropdown
+        trigger="click"
+        :options="
+          availableLocales.map((l) => ({
+            title: $t('languageName', {}, { locale: l }),
+            key: l
+          }))
+        "
+        size="medium"
+        @select="
+          (l) => {
+            locale = l
+            localStorageLocale = l
+          }
+        "
+      >
+        <n-button circle quaternary style="padding: 5px; font-size: 25px">
+          <Icon :icon="`flag:${$t('flag')}-4x3`" width="18" height="18" />
+        </n-button>
+      </n-dropdown>
+    </n-config-provider>
+  </div>
+</template>

src/i18n.js

@@ -4,11 +4,10 @@ import { createI18n } from 'vue-i18n'
 
 const locale = useLocalStorage('valoryLocale', 'en')
 
-const localStorageLang = localStorage.getItem('valoryLocale')
-
 export const i18n = createI18n({
   legacy: false,
-  locale: localStorageLang || locale.value,
+  locale: locale.value,
   fallbackLocale: 'en',
-  messages
+  messages,
+  globalInjection: true
 })

src/locales/de.json

@@ -0,0 +1,37 @@
+{
+  "languageName": "Deutsch",
+  "flag": "de",
+  "landing": {
+    "pretitle": "OVERLAY FÜR STREAM 2.0",
+    "description": "Ziehen Sie die Aufmerksamkeit des Publikums mit VALORANT-Statistiken auf sich!",
+    "features": {
+      "first": "Passen Sie Ihr Overlay entsprechend Ihrem Stream an.",
+      "second": "Das ist absolut kostenlos! Es wird von vielen beliebten Streaming-Programmen unterstützt, wie zum Beispiel OBS und andere.",
+      "third": "Installieren Sie es einmal, und alles wird wie am Schnürchen laufen!"
+    },
+    "buttons": {
+      "first": "Wie funktioniert das?",
+      "second": "Erstellen Sie Ihr Overlay"
+    },
+    "footer": "Hergestellt mit"
+  },
+  "editor": {
+    "header": {
+      "title": "Overlay mit Statistiken",
+      "description": "Zeigen Sie Ihre Statistiken in Streaming-Programmen wie OBS Studio an."
+    },
+    "riotId": {
+      "title": "Riot ID",
+      "description": "Riot ID ist Ihre universelle Kennung, die in allen Spielen von Riot Games verwendet wird.",
+      "submit": "Senden",
+      "random": "Klicken Sie, um ein Beispiel für Riot ID einzufügen."
+    },
+    "customization": {
+      "title": "Wählen Sie Optionen aus",
+      "description": "Passen Sie das Overlay nach Ihren Vorlieben an."
+    },
+    "preview": {
+      "title": "Daten nicht gefunden"
+    }
+  }
+}

src/locales/en.json

@@ -1,5 +1,6 @@
 {
   "languageName": "English",
+  "flag": "us",
   "landing": {
     "pretitle": "STREAM OVERLAY 2.0",
     "description": "Grab your audience's attention with real-time VALORANT stats!",

src/locales/kz.json

@@ -0,0 +1,37 @@
+{
+  "languageName": "Қазақша",
+  "flag": "kz",
+  "landing": {
+    "pretitle": "ОВЕРЛЕЙ ДЛЯ СТРИМА 2.0",
+    "description": "VALORANT статистикасымен аудиторияның назарын себепке жасау!",
+    "features": {
+      "first": "Өзіңіздің стримыңызға сәйкес оверлейіңізді кастомдайтыңыз.",
+      "second": "Бұл толығымен тегін! OBS және басқалар т.б. көптеген танымал стриминг программаларында қолданылуына қолдау беріледі.",
+      "third": "Бір рет орнатып, барлығы да сағат көрінетінше жұмыс істейді!"
+    },
+    "buttons": {
+      "first": "Бұл қалай жұмыс істейді?",
+      "second": "Өзіңіздің оверлейіңізді жасау"
+    },
+    "footer": "Салыстырылды"
+  },
+  "editor": {
+    "header": {
+      "title": "Статистикалық оверлей",
+      "description": "OBS Studio сияқты стриминг программаларында өз статистикасын көрсетіңіз."
+    },
+    "riotId": {
+      "title": "Riot ID",
+      "description": "Riot ID - барлық Riot Games ойындарында пайдаланылатын сіздің бірліктік идентификаторыңыз.",
+      "submit": "Жіберу",
+      "random": "Riot ID мисалын енгізу үшін басыңыз."
+    },
+    "customization": {
+      "title": "Параметрлерді таңдау",
+      "description": "Оларды сіздің көпшіліктеріңізге сәйкес оверлейді теңшеу."
+    },
+    "preview": {
+      "title": "Деректер табылмады"
+    }
+  }
+}

src/locales/ru.json

@@ -1,5 +1,6 @@
 {
   "languageName": "Русский",
+  "flag": "ru",
   "landing": {
     "pretitle": "ОВЕРЛЕЙ ДЛЯ СТРИМА 2.0",
     "description": "Привлекайте внимание аудитории статистикой VALORANT!",

src/locales/ua.json

@@ -0,0 +1,37 @@
+{
+  "languageName": "Українська",
+  "flag": "ua",
+  "landing": {
+    "pretitle": "ОВЕРЛЕЙ ДЛЯ СТРІМУ 2.0",
+    "description": "Привертайте увагу аудиторії статистикою VALORANT!",
+    "features": {
+      "first": "Кастомізуйте свій оверлей відповідно до вашого стріму.",
+      "second": "Це абсолютно безкоштовно! Є підтримка для багатьох популярних програм для стрімінгу. Наприклад, OBS та інші.",
+      "third": "Встановіть один раз, і все буде працювати, як годинник!"
+    },
+    "buttons": {
+      "first": "Як це працює?",
+      "second": "Створіть свій оверлей"
+    },
+    "footer": "Зроблено з"
+  },
+  "editor": {
+    "header": {
+      "title": "Оверлей зі статистикою",
+      "description": "Покажіть свою статистику в програмах для стрімінгу, таких як OBS Studio."
+    },
+    "riotId": {
+      "title": "Riot ID",
+      "description": "Riot ID – ваш універсальний ідентифікатор, який використовується в усіх іграх Riot Games.",
+      "submit": "Відправити",
+      "random": "Натисніть, щоб вставити приклад Riot ID."
+    },
+    "customization": {
+      "title": "Виберіть опції",
+      "description": "Налаштовуйте оверлей відповідно до ваших уподобань."
+    },
+    "preview": {
+      "title": "Дані не знайдені"
+    }
+  }
+}

src/views/EditorView.vue

@@ -29,9 +29,7 @@ const riotId = ref('')
                   </div>
                   <div class="editor__input">
                     <Input style="flex: 2" v-model="riotId" placeholder="Riot ID" />
-                    <Button class="editor__button">{{
-                      $t('editor.riotId.submit')
-                    }}</Button>
+                    <Button class="editor__button">{{ $t('editor.riotId.submit') }}</Button>
                   </div>
                   <span @click="riotId = 'MAGICX#1337'" class="random">{{
                     $t('editor.riotId.random')
@@ -99,7 +97,7 @@ const riotId = ref('')
           .editor__button {
             border-radius: 5px;
             padding: 0.7rem 1.1rem;
-            font-size: 0.75rem
+            font-size: 0.75rem;
           }
         }