From 55e8fa59d04a59f52ecd0288641f68fd940b7725 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Tue, 11 Mar 2025 02:18:29 +0100
Subject: [PATCH] refactor(ui): Optimize LanguageSwitcher component rendering
 and type safety

- Simplify language display logic using computed property
- Add Locale interface for improved type checking
- Remove redundant v-for loops in template
- Enhance readability and performance of language selection rendering
---
 src/components/LanguageSwitcher.vue | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/LanguageSwitcher.vue b/src/components/LanguageSwitcher.vue
index a2b7a90..4777339 100644
--- a/src/components/LanguageSwitcher.vue
+++ b/src/components/LanguageSwitcher.vue
@@ -8,20 +8,27 @@ import {
 import { Button } from '@/components/ui/button'
 import { Check } from 'lucide-vue-next'
 import { useLocale } from '@/composables/useLocale'
+import { computed } from 'vue'
+
+interface Locale {
+  code: string
+  name: string
+  flag: string
+}
 
 const { currentLocale, locales, setLocale } = useLocale()
+
+const currentLocaleInfo = computed<Locale | undefined>(() => 
+  locales.value.find((locale: Locale) => locale.code === currentLocale.value)
+)
 </script>
 
 <template>
   <DropdownMenu>
     <DropdownMenuTrigger as-child>
-      <Button variant="ghost" size="sm" class="gap-2 w-[120px] justify-start">
-        <span v-for="locale in locales" :key="locale.code">
-          {{ locale.code === currentLocale ? locale.flag : '' }}
-        </span>
-        <span v-for="locale in locales" :key="locale.code">
-          {{ locale.code === currentLocale ? locale.name : '' }}
-        </span>
+      <Button variant="ghost" size="sm" class="w-[120px] justify-start">
+        <span>{{ currentLocaleInfo?.flag }}</span>
+        <span>{{ currentLocaleInfo?.name }}</span>
       </Button>
     </DropdownMenuTrigger>
     <DropdownMenuContent align="end" class="w-[120px]">