Sélecteur de langue

محول اللغةLanguage switcher

Stablesrc/dsm/components/language-switcher.tsx

Le sélecteur de langue permet de basculer entre les langues officielles du site sans perdre le contexte de la page courante. Il s'appuie sur un menu accessible et affiche la langue courante en abrégé ou sous forme d'icône.

Import

import { LanguageSwitcher } from "@/dsm/components/language-switcher";

Exemples

Par défaut

Menu avec libellé (code de langue) et coche sur la langue active.

LTR

Variante icône

Déclencheur réduit à l'icône du globe, pour un en-tête compact.

LTR

Langues restreintes

Un service qui n'existe encore qu'en français et en arabe.

LTR

Usage

Quand l'utiliser

Placez un seul sélecteur de langue par page, dans l'en-tête, à côté des autres outils.
Fournissez `links` avec l'URL équivalente dans chaque langue, pour rester sur le même contenu après le changement.
Restreignez `available` si une page n'existe pas encore dans toutes les langues officielles.

Quand ne pas l'utiliser

N'utilisez pas ce composant pour changer un réglage autre que la langue (thème clair/sombre) : utilisez `ThemeToggle`.
Ne masquez pas la langue courante de la liste déroulante : l'utilisateur doit voir où il se trouve.

Accessibilité & langues

Accessibilité

Le déclencheur porte un `aria-label` (« Choisir la langue ») car son contenu visible peut se limiter à une icône ou à un code de langue.
Chaque option précise sa propre langue (`lang`) et son sens de lecture (`dir`), pour une prononciation correcte par les lecteurs d'écran.
La langue active est cochée (`Check`) dans le menu, en plus d'être annoncée par son libellé natif.

RTL & multilingue

Le menu s'ouvre et s'aligne selon le sens de lecture courant, piloté par le `DirectionProvider` global — aucun réglage RTL manuel n'est nécessaire.

Propriétés

LanguageSwitcher

Propriété	Type	Défaut	Description
links	Partial<Record<Locale, string>>	—	URL par langue ; sans cette prop, utilisez `onChange` pour un changement côté client.
onChange	(locale: Locale) => void	—	Appelé avec la langue choisie lorsque `links` n'est pas fourni.
available	Locale[]	toutes les langues	Restreint les langues proposées dans le menu.
variant	"icon" \| "label"	label	« label » affiche le code de la langue courante à côté de l'icône ; « icon » n'affiche que le globe.
className	string	—	Classes Tailwind supplémentaires.