Aimpress_site/specs/001-multi-language/quickstart.md

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

import { useTranslation } from '../i18n';

function MyComponent() {
  const { t, lang } = useTranslation();
  return <h1>{t('my.section.title')}</h1>;
}

Formatting Dates by Locale

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