6e932d76e4
Custom i18n system with typed translation dictionaries (~570 keys), LanguageProvider context, and useTranslation hook. All 31 components and pages wired with t() calls. Chatbot backend passes language hint to Claude for Ukrainian responses. Language preference persists via localStorage. SEO meta tags and html lang attribute update dynamically. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
36 lines
1 KiB
Markdown
36 lines
1 KiB
Markdown
# Quickstart: Multi-Language Support
|
|
|
|
## Adding a New Translation
|
|
|
|
1. Open `src/i18n/types.ts` and add the key to the `Translations` interface
|
|
2. Add the English value in `src/i18n/en.ts`
|
|
3. Add the Ukrainian value in `src/i18n/uk.ts`
|
|
4. TypeScript will error if any file is missing the new key
|
|
|
|
## Using Translations in a Component
|
|
|
|
```typescript
|
|
import { useTranslation } from '../i18n';
|
|
|
|
function MyComponent() {
|
|
const { t, lang } = useTranslation();
|
|
return <h1>{t('my.section.title')}</h1>;
|
|
}
|
|
```
|
|
|
|
## Formatting Dates by Locale
|
|
|
|
```typescript
|
|
const { lang } = useTranslation();
|
|
const locale = lang === 'uk' ? 'uk-UA' : 'en-GB';
|
|
const formatted = new Date(dateStr).toLocaleDateString(locale, {
|
|
year: 'numeric', month: 'long', day: 'numeric'
|
|
});
|
|
```
|
|
|
|
## Adding a New Language (Future)
|
|
|
|
1. Add the new code to the `Lang` type in `types.ts`
|
|
2. Create a new translation file (e.g., `de.ts`) satisfying `Translations`
|
|
3. Register it in `LanguageContext.tsx` translations map
|
|
4. Add the language option to the Header toggle
|