header/footer/styles

components/LangSwitcher.vue

@@ -0,0 +1,52 @@
+<template>
+  <USelect
+    v-model="selectedLocaleCode"
+    :items="locales"
+    value-key="code"
+    :searchable="false"
+    :ui="{
+      base: 'bg-inherit ring-0 cursor-pointer w-auto focus:ring-0 outline-none focus-visible:ring-0',
+      trailing: 'hidden',
+      viewport: 'ring-0',
+      content: 'bg-bg-light dark:bg-bg-dark w-auto ring-0 border border-button',
+      leading:
+        'left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 p-0',
+      group: 'px-[5px] py-[10px]',
+      item: 'hover:bg-bg-block dark:hover:bg-button rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50',
+    }"
+    @update:model-value="setLocale"
+  >
+    <template #leading="{ modelValue }">
+      <div class="flex items-center gap-2 text-xl font-medium">
+        {{ locales.find((item) => item.code === modelValue)?.name }}
+      </div>
+    </template>
+
+    <template #item="{ item }">
+      <div class="flex items-center gap-2 cursor-pointer w-full">
+        <UIcon
+          :name="item.icon as string"
+          class="size-5 rounded-full border border-button/40"
+        />
+        <p class="text-xl font-medium">{{ item.name }}</p>
+      </div>
+    </template>
+  </USelect>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from "#imports";
+
+const { locale, locales, setLocale } = useI18n();
+
+const selectedLocaleCode = ref(locale.value);
+const selectedIcon = ref(
+  locales.value.find((item) => item.code === locale.value)?.icon
+);
+
+watch(selectedLocaleCode, async (newCode) => {
+  if (newCode !== locale.value) {
+    await setLocale(newCode);
+  }
+});
+</script>