feat(i18n): implement language selector

app/src/components/LanguageSelector.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { setLocale, type SupportedLocale } from '../i18n'
+
+const { locale } = useI18n({ useScope: 'global' })
+
+function changeLanguage(event: Event) {
+  const selectedLocale = (event.target as HTMLSelectElement)
+    .value as SupportedLocale
+
+  setLocale(selectedLocale)
+}
+</script>
+
+<template>
+  <select
+    :value="locale"
+    class="bg-bg-secondary px-3 py-2 font-mono text-sm text-text shadow-md outline-none"
+    aria-label="Language"
+    @change="changeLanguage"
+    style="font-size: 2vh"
+  >
+    <option value="en">English</option>
+    <option value="zh-TW">繁體中文</option>
+  </select>
+</template>

app/src/components/header/HeaderPart.vue

@@ -1,6 +1,11 @@
 <script setup lang="ts">
 import { defineProps, ref } from 'vue'
 
+import { useI18n } from 'vue-i18n'
+import LanguageSelector from '../LanguageSelector.vue'
+
+const { t } = useI18n()
+
 defineProps({
   title: {
     type: String,
@@ -19,9 +24,10 @@ const toggleMenu = () => {
 </script>
 <template>
   <div
-    class="w-full top-0 px-5 fixed flex flex-row flex-wrap bg-bg-secondary justify-between items-center sm:justify-between"
+    class="w-full top-0 px-2 fixed flex flex-row flex-wrap bg-bg-secondary justify-between items-center sm:justify-between"
   >
     <div class="flex flex-row items-center gap-3" :class="{ hidden: menuOpen }">
+      <LanguageSelector />
       <img src="../../img/icon_totem.svg" class="h-8 justify-self-start" />
       <RouterLink
         to="/"

app/src/i18n/locales/en.json

@@ -1 +1,7 @@
-{}
+{
+  "language": {
+    "change": "Change language",
+    "traditionalChinese": "繁體中文",
+    "english": "English"
+  }
+}

app/src/i18n/locales/zh-TW.json

@@ -1 +1,7 @@
-{}
+{
+  "language": {
+    "change": "切換語言",
+    "traditionalChinese": "繁體中文",
+    "english": "English"
+  }
+}