From 35122558f9f1321d5238534cc030abd27667755c Mon Sep 17 00:00:00 2001
From: siujamo <jamo.siu@outlook.com>
Date: Mon, 19 Jan 2026 14:57:27 +0800
Subject: [PATCH] feat: add language switch

---
 src/components/language-switcher/index.tsx | 35 ++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 src/components/language-switcher/index.tsx

diff --git a/src/components/language-switcher/index.tsx b/src/components/language-switcher/index.tsx
new file mode 100644
index 0000000..6ded6d9
--- /dev/null
+++ b/src/components/language-switcher/index.tsx
@@ -0,0 +1,35 @@
+import { useTranslation } from "react-i18next"
+
+/**
+ * Language switcher component that allows users to switch between supported languages.
+ */
+export default function LanguageSwitcher() {
+  const { i18n, t } = useTranslation()
+
+  const handleLanguageChange = (language: string) => {
+    void i18n.changeLanguage(language)
+  }
+
+  const currentLanguage = i18n.language
+
+  return (
+    <div className="relative">
+      <select
+        value={currentLanguage}
+        onChange={(e) => handleLanguageChange(e.target.value)}
+        className="appearance-none bg-white border border-gray-300 rounded-md px-3 py-1 pr-8 text-sm text-gray-700 hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent min-w-[120px]"
+        aria-label={t("language.switch")}>
+        <option value="en-GB">{t("language.english")}</option>
+        <option value="zh-CN">{t("language.chinese")}</option>
+      </select>
+      <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
+        <svg
+          className="fill-current h-4 w-4"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20">
+          <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
+        </svg>
+      </div>
+    </div>
+  )
+}