d5bc311757
- Redesign LoginPage with minimal professional style - Remove animated gradient backgrounds and floating orbs - Remove marketing claims (99% accuracy, enterprise-grade) - Center login form with clean card design - Add multi-language support (zh-TW, en-US) - Create LanguageSwitcher component in sidebar - Add en-US.json translation file - Persist language preference in localStorage - Remove unused top header bar with search - Move language switcher to sidebar user section 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
46 lines
1.5 KiB
TypeScript
46 lines
1.5 KiB
TypeScript
import { useTranslation } from 'react-i18next'
|
|
import { Globe } from 'lucide-react'
|
|
|
|
const languages = [
|
|
{ code: 'zh-TW', label: '繁體中文' },
|
|
{ code: 'en-US', label: 'English' },
|
|
]
|
|
|
|
export default function LanguageSwitcher() {
|
|
const { i18n } = useTranslation()
|
|
|
|
const handleLanguageChange = (langCode: string) => {
|
|
i18n.changeLanguage(langCode)
|
|
localStorage.setItem('tool-ocr-language', langCode)
|
|
}
|
|
|
|
const currentLang = languages.find((lang) => lang.code === i18n.language) || languages[0]
|
|
|
|
return (
|
|
<div className="relative group">
|
|
<button
|
|
className="w-full flex items-center gap-2 px-3 py-2 text-sm text-sidebar-foreground/70
|
|
hover:text-sidebar-foreground hover:bg-white/5 rounded-lg transition-colors"
|
|
>
|
|
<Globe className="w-5 h-5" />
|
|
<span>{currentLang.label}</span>
|
|
</button>
|
|
|
|
{/* Dropdown */}
|
|
<div className="absolute left-0 bottom-full mb-1 py-1 bg-card border border-border rounded-lg shadow-lg
|
|
opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-50 min-w-[140px]">
|
|
{languages.map((lang) => (
|
|
<button
|
|
key={lang.code}
|
|
onClick={() => handleLanguageChange(lang.code)}
|
|
className={`w-full px-3 py-2 text-sm text-left hover:bg-muted transition-colors
|
|
${i18n.language === lang.code ? 'text-primary font-medium' : 'text-foreground'}`}
|
|
>
|
|
{lang.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|