From 5efef91d03519dbc7a455d1671e559246f7c73f0 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Sun, 2 Feb 2025 21:25:08 +0100
Subject: [PATCH] add LanguageSwitcher component

---
 src/components/LanguageSwitcher.vue | 20 ++++++++++++++++++++
 src/components/layout/Navbar.vue    |  4 +++-
 2 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 src/components/LanguageSwitcher.vue

diff --git a/src/components/LanguageSwitcher.vue b/src/components/LanguageSwitcher.vue
new file mode 100644
index 0000000..4c41924
--- /dev/null
+++ b/src/components/LanguageSwitcher.vue
@@ -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> 
\ No newline at end of file
diff --git a/src/components/layout/Navbar.vue b/src/components/layout/Navbar.vue
index d3e534a..6b87b9c 100644
--- a/src/components/layout/Navbar.vue
+++ b/src/components/layout/Navbar.vue
@@ -2,6 +2,7 @@
 import { ref } from 'vue'
 import { Menu, X } from 'lucide-vue-next'
 import ThemeToggle from '@/components/ThemeToggle.vue'
+import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
 
 const isOpen = ref(false)
 
@@ -43,7 +44,8 @@ const toggleMenu = () => {
         </div>
 
         <!-- Theme Toggle -->
-        <div class="flex items-center">
+        <div class="flex items-center gap-2">
+          <LanguageSwitcher />
           <ThemeToggle />
         </div>