add LanguageSwitcher component
This commit is contained in:
parent
889102af2b
commit
5efef91d03
2 changed files with 23 additions and 1 deletions
20
src/components/LanguageSwitcher.vue
Normal file
20
src/components/LanguageSwitcher.vue
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { useI18n } from 'vue-i18n'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
|
||||||
|
const { locale } = useI18n()
|
||||||
|
|
||||||
|
const toggleLanguage = () => {
|
||||||
|
locale.value = locale.value === 'en' ? 'es' : 'en'
|
||||||
|
}
|
||||||
|
|
||||||
|
const getLanguageLabel = () => {
|
||||||
|
return locale.value === 'en' ? '🇪🇸 ES' : '🇺🇸 EN'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Button variant="ghost" size="sm" @click="toggleLanguage" class="gap-1">
|
||||||
|
{{ getLanguageLabel() }}
|
||||||
|
</Button>
|
||||||
|
</template>
|
||||||
|
|
@ -2,6 +2,7 @@
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import { Menu, X } from 'lucide-vue-next'
|
import { Menu, X } from 'lucide-vue-next'
|
||||||
import ThemeToggle from '@/components/ThemeToggle.vue'
|
import ThemeToggle from '@/components/ThemeToggle.vue'
|
||||||
|
import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
|
||||||
|
|
||||||
const isOpen = ref(false)
|
const isOpen = ref(false)
|
||||||
|
|
||||||
|
|
@ -43,7 +44,8 @@ const toggleMenu = () => {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Theme Toggle -->
|
<!-- Theme Toggle -->
|
||||||
<div class="flex items-center">
|
<div class="flex items-center gap-2">
|
||||||
|
<LanguageSwitcher />
|
||||||
<ThemeToggle />
|
<ThemeToggle />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue