feat(ui): copy logistics header/theme one-to-one

app/components/AppLocaleCurrencySelector.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import type { AppLocale } from '~/composables/useLocaleCurrency'
+
+const {
+  locale,
+  currency,
+  localeOptions,
+  currencyOptions,
+  languageCode,
+  currencyCode,
+  ratesProviderUrl,
+  setLocale,
+  setCurrency,
+  t,
+} = useLocaleCurrency()
+
+const isOpen = ref(false)
+const switchLocalePath = useSwitchLocalePath()
+
+function closeSelector() {
+  isOpen.value = false
+}
+
+async function changeLocale(code: AppLocale) {
+  const nextPath = switchLocalePath(code)
+  await setLocale(code)
+  if (nextPath) {
+    await navigateTo(nextPath)
+  }
+}
+</script>
+
+<template>
+  <div class="relative">
+    <button
+      type="button"
+      class="btn h-11 min-h-0 gap-2 rounded-full border-0 bg-transparent px-3 text-xs font-black uppercase tracking-[0.08em] shadow-none transition hover:bg-white/70"
+      :aria-label="t('settings.open')"
+      :aria-expanded="String(isOpen)"
+      @click="isOpen = !isOpen"
+    >
+      <svg viewBox="0 0 24 24" fill="none" class="h-4 w-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <circle cx="12" cy="12" r="10" />
+        <path d="M2 12h20" />
+        <path d="M12 2a15.3 15.3 0 0 1 0 20" />
+        <path d="M12 2a15.3 15.3 0 0 0 0 20" />
+      </svg>
+      <span>{{ languageCode }} · {{ currencyCode }}</span>
+    </button>
+
+    <div
+      v-if="isOpen"
+      class="absolute left-0 top-[calc(100%+0.7rem)] z-[110] w-[292px] rounded-[28px] bg-[#f3eee6] p-3 text-[#2f2418] shadow-[0_24px_60px_rgba(35,30,25,0.22)]"
+    >
+      <div class="rounded-[22px] bg-white p-3">
+        <p class="px-2 text-[11px] font-black uppercase tracking-[0.16em] text-[#8a7761]">{{ t('settings.language') }}</p>
+        <div class="mt-2 grid grid-cols-2 gap-1.5">
+          <button
+            v-for="item in localeOptions"
+            :key="item.code"
+            type="button"
+            class="rounded-2xl px-3 py-2 text-left text-sm font-bold transition"
+            :class="locale === item.code ? 'bg-[#2f2418] text-white' : 'bg-[#f6f1ea] text-[#5f4b33] hover:bg-[#eee6dc]'"
+            @click="changeLocale(item.code)"
+          >
+            <span class="block">{{ item.nativeLabel }}</span>
+            <span class="mt-0.5 block text-[11px] opacity-65">{{ item.label }}</span>
+          </button>
+        </div>
+      </div>
+
+      <div class="mt-2 rounded-[22px] bg-white p-3">
+        <p class="px-2 text-[11px] font-black uppercase tracking-[0.16em] text-[#8a7761]">{{ t('settings.currency') }}</p>
+        <div class="mt-2 grid grid-cols-2 gap-1.5">
+          <button
+            v-for="item in currencyOptions"
+            :key="item.code"
+            type="button"
+            class="rounded-2xl px-3 py-2 text-left text-sm font-bold transition"
+            :class="currency === item.code ? 'bg-[#2f2418] text-white' : 'bg-[#f6f1ea] text-[#5f4b33] hover:bg-[#eee6dc]'"
+            @click="setCurrency(item.code)"
+          >
+            <span class="block">{{ item.code }}</span>
+            <span class="mt-0.5 block text-[11px] opacity-65">{{ item.symbol }} · {{ item.label }}</span>
+          </button>
+        </div>
+      </div>
+
+      <button
+        type="button"
+        class="mt-2 h-10 w-full rounded-full bg-[#2f2418] text-sm font-black text-white transition hover:bg-[#493823]"
+        @click="closeSelector"
+      >
+        {{ t('settings.apply') }}
+      </button>
+
+      <a
+        :href="ratesProviderUrl"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="mt-2 block px-2 text-center text-[10px] font-bold uppercase tracking-[0.12em] text-[#8a7761] transition hover:text-[#2f2418]"
+      >
+        {{ t('settings.ratesBy') }}
+      </a>
+    </div>
+  </div>
+</template>