From ce0507deb9101154dca76764e63315598d7f30f3 Mon Sep 17 00:00:00 2001
From: svyeh <sivanyeh@gmail.com>
Date: Sat, 11 May 2024 17:16:50 +0800
Subject: [PATCH] feat(header/locale): add icon and adjust

Add globe icon and adjust language name for language switch on header.
---
 components/core/header/locale-switch/LocaleSwitch.i18n.js | 4 ++--
 components/core/header/locale-switch/LocaleSwitch.vue     | 5 +++++
 static/locale-icon.svg                                    | 3 +++
 3 files changed, 10 insertions(+), 2 deletions(-)
 create mode 100644 static/locale-icon.svg

diff --git a/components/core/header/locale-switch/LocaleSwitch.i18n.js b/components/core/header/locale-switch/LocaleSwitch.i18n.js
index 824662e6cd..bd02259a2e 100644
--- a/components/core/header/locale-switch/LocaleSwitch.i18n.js
+++ b/components/core/header/locale-switch/LocaleSwitch.i18n.js
@@ -3,10 +3,10 @@ import { genI18nMessages } from '~/utils/i18n.utils'
 export default genI18nMessages({
     'en-us': {
         'en-us': 'EN',
-        'zh-hant': 'ZH',
+        'zh-hant': '中文',
     },
     'zh-hant': {
-        'en-us': '英文',
+        'en-us': 'EN',
         'zh-hant': '中文',
     },
 })
diff --git a/components/core/header/locale-switch/LocaleSwitch.vue b/components/core/header/locale-switch/LocaleSwitch.vue
index 7ebf9b5a87..c9a2bac803 100644
--- a/components/core/header/locale-switch/LocaleSwitch.vue
+++ b/components/core/header/locale-switch/LocaleSwitch.vue
@@ -2,6 +2,11 @@
     <div class="core-localeSwitch h-full">
         <nav-bar-item-dropdown sm>
             <template #label>
+                <img
+                    src="~/static/locale-icon.svg"
+                    :alt="`Locale Icon`"
+                    class="w-4 pr-1"
+                />
                 {{ $t($i18n.locale) }}
             </template>
             <template v-slot:items="{ hideMenu }">
diff --git a/static/locale-icon.svg b/static/locale-icon.svg
new file mode 100644
index 0000000000..633d719b94
--- /dev/null
+++ b/static/locale-icon.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 0C4.477 0 0 4.477 0 10C0 15.523 4.477 20 10 20C15.523 20 20 15.523 20 10C20 4.477 15.523 0 10 0ZM10 18L12 16L13 15V13H11V12L10 11H7V14L9 16V17.931C5.06 17.436 2 14.072 2 10L3 11H5V9H7L10 6V4H8L7 3V2.589C8.92313 1.80478 11.0769 1.80478 13 2.589V4L12 5V7L13 8L16.13 4.87C16.8914 5.78093 17.4401 6.85022 17.736 8H16L14 10V12L15 13H17L17.286 13.286C16.029 16.061 13.239 18 10 18Z" fill="white"/>
+</svg>