Langues

Les langues livrées

Chaque libellé, bouton, légende de graphique, titre de tableau, message de formulaire et titre de page existe dans les deux langues.

Comment la langue est choisie

• La langue est la première partie de chaque adresse : /en/dashboard/analytics, /ar/dashboard/analytics.
• Un visiteur qui ouvre / est envoyé vers /ar quand son navigateur préfère l'arabe, et vers /en sinon. C'est src/proxy.ts qui s'en charge.
• Le menu des langues de l'en-tête, un drapeau avec son code, change de langue et garde l'utilisateur sur la même page. Sur un téléphone, il se trouve dans le menu utilisateur. Language dans Settings, Preferences fait la même chose.

De droite à gauche

Sur /ar, src/app/[locale]/layout.tsx définit lang="ar" et dir="rtl" sur la page, si bien que toute la mise en page est inversée : la barre latérale passe à droite, et les cartes, tableaux et menus se lisent de droite à gauche.

Les composants utilisent des classes Tailwind logiques qui suivent le sens d'écriture, comme ms-2, pe-4, start-0 et text-start. Quand vous ajoutez du code, utilisez-les à la place de ml-*, pr-*, left-* ou text-left, sinon la page arabe s'affiche mal.

Où se trouvent les textes

Les textes sont répartis par page sous messages/, chaque dossier contenant un en.json et un ar.json :

Modifier un texte

• Changez la valeur dans le fichier anglais et celle qui lui correspond dans le fichier arabe. Gardez les mêmes clés dans les deux.
• Une clé absente d'un fichier affiche son nom à la place du texte sur la page de cette langue.
• Les mots entre accolades, comme {theme}, sont remplis par l'application. Gardez-les tels quels.

Les libellés arabes du tableau de bord

Quand vous écrivez sur le tableau de bord en arabe, utilisez les libellés qu'il affiche :

Ajouter une langue

1. 01

   Ajoutez son code au routage

   Ajoutez le code de la langue à locales dans src/i18n/routing.ts. Par exemple le français :

   src/i18n/routing.tsCopier

   locales: ['en', 'ar', 'fr'],
2. 02

   Ajoutez ses fichiers de messages

   Dans chacun des huit dossiers sous messages/, copiez en.json sous le nouveau code et traduisez les valeurs. Gardez chaque clé et chaque mot entre accolades. src/i18n/request.ts les charge d'après le code de la langue : chaque dossier a donc besoin du fichier. Pour le dossier common :

   Terminaldans dashboard-template-1Copier

   cp messages/common/en.json messages/common/fr.json
3. 03

   Ajoutez-la au menu de langue

   Ajoutez-la à languageOptions dans src/components/LanguageSelector.tsx, avec son nom, un libellé court et un drapeau de country-flag-icons, par exemple { id: "fr", label: "Français", shortLabel: "FR", Flag: FR } avec FR ajouté à l'import des drapeaux.
4. 04

   Définissez son sens d'écriture et sa police, si besoin

   Seul l'arabe est traité de droite à gauche. Pour une autre langue de droite à gauche, étendez les vérifications locale === "ar" dans src/app/[locale]/layout.tsx, src/components/calendar.tsx, src/components/themeToggle.tsx, src/features/dashboard/overview/components/CardSection/CardStack/index.tsx et dans QuickTransferSheet/index.tsx du virement rapide. Pour une écriture que Inter ne couvre pas, ajoutez une police avec next/font dans layout.tsx.

Relancez yarn dev, ou reconstruisez, et la nouvelle langue répond à sa propre adresse, ici /fr/login.