feat: simplify login page UX and add i18n English support
- 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>
This commit is contained in:
45
frontend/src/components/LanguageSwitcher.tsx
Normal file
45
frontend/src/components/LanguageSwitcher.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user