diff --git a/public/locales/ar/translation.json b/public/locales/ar/translation.json index 3d3a882..af0032d 100644 --- a/public/locales/ar/translation.json +++ b/public/locales/ar/translation.json @@ -10,5 +10,18 @@ "label-quantity": "أدخل كمية:", "label-formatted-file-type": "نوع الملف المنسق:", "label-file-type": "حدد نوع الملف:", - "heading": "التدويل للجميع" + "heading": "التدويل للجميع", + "formatted-quantity_zero": "يوجد {{count}} عناصر", + "formatted-quantity_one": "هناك عنصر {{count}}", + "formatted-quantity_two": "يوجد {{count}} عناصر", + "formatted-quantity_few": "يوجد {{count}} عنصر", + "formatted-quantity_many": "يوجد {{count}} مادة", + "formatted-quantity_other": "يوجد {{count}} عنصر", + "slide-deck": "مجموعة الشرائح المتاحة هنا .", + "file-type-file": "ملف", + "file-type-image": "صورة", + "file-type-video": "فيديو", + "formatted-file-type-file": "الملف جاهز.", + "formatted-file-type-image": "الصورة جاهزة.", + "formatted-file-type-video": "الفيديو جاهز." } diff --git a/public/locales/en-GB/translation.json b/public/locales/en-GB/translation.json new file mode 100644 index 0000000..500c650 --- /dev/null +++ b/public/locales/en-GB/translation.json @@ -0,0 +1,3 @@ +{ + "heading": "Internationalisation is for Everyone" +} diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index b28cfdb..54aa46b 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -10,5 +10,14 @@ "label-formatted-amount": "Formatted amount:", "label-formatted-currency": "Formatted currency:", "label-file-type": "Select a file type:", - "label-formatted-file-type": "Formatted file type:" + "label-formatted-file-type": "Formatted file type:", + "formatted-quantity_one": "There is {{count}} item", + "formatted-quantity_other": "There are {{count}} items", + "slide-deck": "Slide deck available here.", + "file-type-file": "file", + "file-type-image": "image", + "file-type-video": "video", + "formatted-file-type-file": "The file is ready.", + "formatted-file-type-image": "The image is ready.", + "formatted-file-type-video": "The video is ready." } diff --git a/public/locales/fr/translation.json b/public/locales/fr/translation.json index 0c8fbfc..b324734 100644 --- a/public/locales/fr/translation.json +++ b/public/locales/fr/translation.json @@ -10,5 +10,14 @@ "label-quantity": "Saisissez une quantité :", "label-formatted-file-type": "Type de fichier formaté :", "label-file-type": "Sélectionnez un type de fichier :", - "heading": "L'internationalisation est pour tout le monde" + "heading": "L'internationalisation est pour tout le monde", + "formatted-quantity_one": "Il y a {{count}} élément", + "formatted-quantity_other": "Il y a {{count}} éléments", + "slide-deck": "Diaporama disponible ici.", + "file-type-file": "fichier", + "file-type-image": "image", + "file-type-video": "vidéo", + "formatted-file-type-file": "Le fichier est prêt.", + "formatted-file-type-image": "L'image est prête.", + "formatted-file-type-video": "La vidéo est prête." } diff --git a/src/App.jsx b/src/App.jsx index 227e345..a7da7e5 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,3 +1,4 @@ +/* eslint-disable jsx-a11y/anchor-has-content */ import "./App.css"; import React, { useEffect, @@ -6,7 +7,7 @@ import React, { useMemo, Suspense, } from "react"; -import { useTranslation } from "react-i18next"; +import { useTranslation, Trans } from "react-i18next"; import LoadingSpinner from "./components/LoadingSpinner"; const FILE_TYPES = ["file", "image", "video"]; @@ -24,10 +25,10 @@ function App() { const FileTypeOptions = useMemo(() => { return FILE_TYPES.map((fileType) => ( )); - }, []); + }, [t]); const updateFormattedAmount = useCallback(() => { if (isNaN(amount) || amount === "") { @@ -54,7 +55,7 @@ function App() { const handleFileTypeChange = (e) => { const fileType = e.target.value; - setFormattedFileType(`The ${fileType} is ready.`); + setFormattedFileType(t(`formatted-file-type-${fileType}`)); }; const handleDateChange = (e) => { @@ -75,9 +76,7 @@ function App() { if (isNaN(quantity)) { setFormattedQuantity(""); } else { - setFormattedQuantity( - `There ${quantity === 1 ? "is 1 item" : `are ${quantity} items`}` - ); + setFormattedQuantity(t("formatted-quantity", { count: quantity })); } }; @@ -152,11 +151,17 @@ function App() {
{formattedCurrency}

- Slide deck available{" "} - - here - - . + + ), + }} + />