feat: search in a different language

components/LangSwitcher.vue

@@ -1,17 +1,37 @@
 <script setup lang="ts">
-  const { locale, availableLocales, t, setLocale } = useI18n()
+  const { locale: globalLocale, availableLocales, t, setLocale } = useI18n()
+
+  export type Locale = (typeof globalLocale)['value']
+  export type AvailableLocales = Locale[]
+
+  const props = defineProps<{
+    /** Override display locale */
+    value?: Locale
+    /** If true, it will not change global locales */
+    private?: boolean
+  }>()
+
+  const emit = defineEmits<{
+    (e: 'update', value: Locale): void
+  }>()
 
   const localeOptions = availableLocales.map((locale) => ({
     value: locale,
     label: t('language', {}, { locale }),
   }))
+
+  function changeLocale(l: Locale) {
+    emit('update', l)
+    if (props.private) return
+    setLocale(l)
+  }
 </script>
 
 <template>
   <USelect
     icon="i-lucide-languages"
-    :model-value="locale"
+    :model-value="value ?? globalLocale"
     :items="localeOptions"
-    @update:model-value="setLocale($event)"
+    @update:model-value="changeLocale($event)"
   />
 </template>