chamomind/elearning
7
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages 3 Wiki Activity Actions

feat: Add i18n configuration for Thai and English locales and introduce a language switcher component.

Browse source
This commit is contained in:
supalerk-ar66 2026-01-19 16:25:26 +07:00
parent 38137f62c1
commit 01978f9438
2 changed files with 42 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

47
Frontend-Learner/components/common/LanguageSwitcher.vue
View file

@ -43,9 +43,15 @@ const changeLocale = async (code: string) => {
anchor="bottom right"
self="top right"
class="language-menu"
:offset="[0, 8]"
>
<q-list style="min-width: 180px">
<q-item-label header class="text-xs font-bold uppercase tracking-wider" style="color: var(--text-secondary);">
<q-list style="min-width: 180px" class="py-1">
<q-item-label
header
class="text-xs font-black uppercase tracking-wider mb-1 px-4 pt-3"
style="color: var(--text-secondary)"
:class="['text-slate-600', 'dark:text-slate-400']"
>
{{ $t('language.label') }}
</q-item-label>
@ -55,26 +61,51 @@ const changeLocale = async (code: string) => {
clickable
v-close-popup
@click="changeLocale(loc.code)"
:class="{ 'active-locale': locale === loc.code }"
class="language-item"
class="language-item mx-2 mb-1 rounded-lg transition-colors duration-200"
:class="[
locale === loc.code
? 'bg-blue-50 dark:bg-blue-900/20'
: 'hover:bg-slate-50 dark:hover:bg-slate-800'
]"
>
<q-item-section avatar>
<q-item-section avatar style="min-width: 0; padding-right: 12px;">
<img
:src="getFlagPath(loc.code)"
:alt="loc.code.toUpperCase()"
class="flag-icon-menu"
/>
</q-item-section>
<q-item-section>
<q-item-label class="font-semibold" style="color: var(--text-primary);">
<q-item-label
class="font-bold text-sm"
:class="[
locale === loc.code
? 'text-blue-700 dark:text-blue-300'
: 'text-slate-900 dark:text-slate-100'
]"
>
{{ loc.name }}
</q-item-label>
<q-item-label caption style="color: var(--text-secondary);">
<q-item-label
caption
class="text-xs font-medium mt-0.5"
:class="[
locale === loc.code
? 'text-blue-600/80 dark:text-blue-300/70'
: 'text-slate-500 dark:text-slate-400'
]"
>
{{ loc.code.toUpperCase() }}
</q-item-label>
</q-item-section>
<q-item-section side v-if="locale === loc.code">
<q-icon name="check" color="primary" />
<q-icon
name="check"
size="18px"
:class="['text-blue-700', 'dark:text-blue-300']"
/>
</q-item-section>
</q-item>
</q-list>

6
Frontend-Learner/nuxt.config.ts
View file

@ -7,11 +7,11 @@ export default defineNuxtConfig({
i18n: {
strategy: 'no_prefix',
defaultLocale: 'th',
langDir: 'locales',
locales: [
{ code: 'th', name: 'ไทย', iso: 'th-TH' },
{ code: 'en', name: 'English', iso: 'en-US' }
{ code: 'th', name: 'ไทย', iso: 'th-TH', file: 'th.json' },
{ code: 'en', name: 'English', iso: 'en-US', file: 'en.json' }
],
vueI18n: './i18n.config.ts',
detectBrowserLanguage: {
useCookie: true,
cookieKey: 'i18n_redirected',