I18n

React components for language selection and internationalization (i18n) functionality.

Internationalization Components

React components for language selection and internationalization (i18n) functionality.

Purpose

Provides user-facing UI components for language selection and locale management, enabling users to switch between different language versions of the application.

Components

LanguageSelector

Dropdown menu component that allows users to select their preferred language.

Features:

• ShadCN DropdownMenu integration for consistent UI
• Stores locale preference in browser cookie
• Automatic page reload to apply selected locale
• Accessible keyboard navigation
• Dark mode support
• Matches styling of other navigation components (e.g., ThemeToggle)

Current Support:

• English (en) - default locale

Extensibility: The component is architected for easy addition of new locales. To add a language:

1. Add locale to the locales array in this component
2. Add corresponding locale to src/i18n/request.ts
3. Create translation JSON file in src/locales/

How It Fits

Works with the i18n infrastructure:

• Uses next-intl hooks (useLocale)
• Sets NEXT_LOCALE cookie read by Next.js middleware
• Triggers page reload to apply new locale via middleware
• Integrated into the navigation header for global access