TranslationProvider

The TranslationProvider provides internationalization (i18n) context for multi-language support. It manages the current locale and provides translation utilities.

Features

• Type-safe translation keys
• Locale persistence via cookie
• Lazy-loaded locale files
• Fallback to default locale

Usage

import { useTranslation } from '@/lib/i18n';

function MyComponent() {
  const { t, locale, setLocale } = useTranslation();
  
  return (
    <div>
      <h1>{t('common.welcome')}</h1>
      <p>{t('common.description')}</p>
      
      <select 
        value={locale} 
        onChange={(e) => setLocale(e.target.value)}
      >
        <option value="en">English</option>
        <option value="he">Hebrew</option>
      </select>
    </div>
  );
}

Adding Translations

Translation files are located in src/lib/i18n/locales/:

// src/lib/i18n/locales/en.json
{
  "common": {
    "welcome": "Welcome",
    "description": "This is a description"
  },
  "navigation": {
    "home": "Home",
    "about": "About"
  }
}

Supported Locales

Code	Language	Direction
en	English	LTR
he	Hebrew	RTL

LanguageSelector Component

A ready-to-use language selector component:

import { LanguageSelector } from '@/components/ui';

<LanguageSelector />  // Dropdown with all available locales