chore: update language selector

src/components/LanguageSelector.jsx

-import React from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { useTranslation } from '../js/i18n';
 
 function LanguageSelector() {
   const { lang, setLanguage } = useTranslation();
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef(null);
 
-  const handleLanguageChange = (e) => {
-    setLanguage(e.target.value);
+  const languages = {
+    en: 'English',
+    zh: '中文',
+    ja: '日本語',
+    ko: '한국어'
   };
 
+  const handleLanguageChange = (newLang) => {
+    setLanguage(newLang);
+    setIsOpen(false);
+  };
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
   return (
-    <div id="language-selector">
-      <select id="lang-select" value={lang} onChange={handleLanguageChange}>
-      <option value="zh">中文</option>
-        <option value="en">English</option>
-        <option value="ja">日本語</option>
-        <option value="ko">한국어</option>
-      </select>
+    <div className="language-selector">
+      <button onClick={() => setIsOpen(!isOpen)} className="language-button">
+        {languages[lang]}
+      </button>
+      {isOpen && (
+        <ul className="language-dropdown" ref={dropdownRef}>
+          {Object.entries(languages).map(([code, name]) => (
+            <li key={code} onClick={() => handleLanguageChange(code)}>
+              {name}
+            </li>
+          ))}
+        </ul>
+      )}
     </div>
   );
 }

src/styles/main.css

@@ -155,3 +155,49 @@ footer {
   }
 }
 
+.language-selector {
+  position: relative;
+  display: inline-block;
+}
+
+.language-button {
+  background: none;
+  border: none;
+  padding: 8px 12px;
+  font-size: 14px;
+  cursor: pointer;
+  color: #333;
+}
+
+.language-dropdown {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  background-color: white;
+  border-radius: 4px;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+  list-style-type: none;
+  padding: 0;
+  margin: 4px 0 0;
+  z-index: 1000;
+  max-height: 200px;
+  overflow-y: auto;
+  min-width: 120px;
+}
+
+.language-dropdown li {
+  padding: 8px 16px;
+  cursor: pointer;
+}
+
+.language-dropdown li:hover {
+  background-color: #f5f5f5;
+}
+
+@media (max-width: 768px) {
+  .language-dropdown {
+    right: auto;
+    left: 0;
+  }
+}
+