mirrors/mcphub
1
0
Fork 0
mirror of https://github.com/samanhappy/mcphub.git synced 2025-12-24 02:39:19 -05:00
Code Issues Packages Projects Releases Wiki Activity

refactor: simplify LanguageSwitch component by removing unnecessary language count checks and enhancing dropdown behavior (#249)

Browse Source
This commit is contained in:
samanhappy
2025-07-27 20:44:50 +08:00
committed by GitHub
parent 9b40f7e101
commit 5bb2715094
1 changed files with 8 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/components/ui/LanguageSwitch.tsx
View File

@@ -18,10 +18,8 @@ const LanguageSwitch: React.FC = () => {
setCurrentLanguage(i18n.language); setCurrentLanguage(i18n.language);
}, [i18n.language]); }, [i18n.language]);
// Close dropdown when clicking outside (only needed when more than 2 languages) // Close dropdown when clicking outside
useEffect(() => { useEffect(() => {
if (availableLanguages.length <= 2) return;
const handleClickOutside = (event: MouseEvent) => { const handleClickOutside = (event: MouseEvent) => {
const target = event.target as HTMLElement; const target = event.target as HTMLElement;
if (!target.closest('.language-dropdown')) { if (!target.closest('.language-dropdown')) {
@@ -36,7 +34,7 @@ const LanguageSwitch: React.FC = () => {
return () => { return () => {
document.removeEventListener('mousedown', handleClickOutside); document.removeEventListener('mousedown', handleClickOutside);
}; };
}, [languageDropdownOpen, availableLanguages.length]); }, [languageDropdownOpen]);
const handleLanguageChange = (lang: string) => { const handleLanguageChange = (lang: string) => {
localStorage.setItem('i18nextLng', lang); localStorage.setItem('i18nextLng', lang);
@@ -44,19 +42,9 @@ const LanguageSwitch: React.FC = () => {
window.location.reload(); window.location.reload();
}; };
// Toggle between languages when only two options are available // Always show dropdown for language selection
const handleLanguageToggle = () => { const handleLanguageToggle = () => {
if (availableLanguages.length === 2) { setLanguageDropdownOpen(!languageDropdownOpen);
// Direct toggle between two languages
const currentLangCode = currentLanguage.startsWith('zh') ? 'zh' : 'en';
const nextLang = availableLanguages.find(lang => lang.code !== currentLangCode);
if (nextLang) {
handleLanguageChange(nextLang.code);
}
} else {
// Show dropdown for multiple languages
setLanguageDropdownOpen(!languageDropdownOpen);
}
}; };
return ( return (
@@ -69,8 +57,8 @@ const LanguageSwitch: React.FC = () => {
<LanguageIcon className="h-5 w-5" /> <LanguageIcon className="h-5 w-5" />
</button> </button>
{/* Only show dropdown if there are more than 2 languages or if explicitly opened */} {/* Show dropdown when opened */}
{languageDropdownOpen && availableLanguages.length > 2 && ( {languageDropdownOpen && (
<div className="absolute right-0 mt-2 w-24 bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-200 dark:border-gray-700 z-50"> <div className="absolute right-0 mt-2 w-24 bg-white dark:bg-gray-800 rounded-md shadow-lg border border-gray-200 dark:border-gray-700 z-50">
<div> <div>
{availableLanguages.map((lang) => ( {availableLanguages.map((lang) => (
@@ -78,8 +66,8 @@ const LanguageSwitch: React.FC = () => {
key={lang.code} key={lang.code}
onClick={() => handleLanguageChange(lang.code)} onClick={() => handleLanguageChange(lang.code)}
className={`flex items-center w-full px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 ${currentLanguage.startsWith(lang.code) className={`flex items-center w-full px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-700 ${currentLanguage.startsWith(lang.code)
? 'bg-blue-50 text-blue-700' ? 'bg-blue-50 text-blue-700'
: 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-100' : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-100'
}`} }`}
> >
{lang.label} {lang.label}