- Create translation files (locales/id.ts, locales/en.ts) - Add LanguageContext with useLanguage hook - Add LanguageToggle component in sidebar - Default language: Indonesian (ID) - Translate WalletDialog and TransactionDialog - Language preference persisted in localStorage - Type-safe translations with autocomplete Next: Translate remaining pages (Overview, Wallets, Transactions, Profile)
25 lines
671 B
TypeScript
25 lines
671 B
TypeScript
import { useLanguage } from '@/contexts/LanguageContext'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Languages } from 'lucide-react'
|
|
|
|
export function LanguageToggle() {
|
|
const { language, setLanguage } = useLanguage()
|
|
|
|
const toggleLanguage = () => {
|
|
setLanguage(language === 'id' ? 'en' : 'id')
|
|
}
|
|
|
|
return (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={toggleLanguage}
|
|
className="gap-2"
|
|
title={language === 'id' ? 'Switch to English' : 'Ganti ke Bahasa Indonesia'}
|
|
>
|
|
<Languages className="h-4 w-4" />
|
|
<span className="text-xs font-medium">{language === 'id' ? 'ID' : 'EN'}</span>
|
|
</Button>
|
|
)
|
|
}
|