Adding french and english translation

package.json

@@ -13,8 +13,12 @@
   },
   "dependencies": {
     "@dts-stn/service-canada-design-system": "^1.67.3",
+    "@types/i18next": "^13.0.0",
+    "i18n": "^0.15.1",
+    "i18next": "^23.11.5",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-i18next": "^14.1.2"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",

src/Components/DragDropFileInput/DragDropFileInput.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useRef, useEffect } from "react";
 import "./DragDropFileInput.css";
+import { useTranslation } from "react-i18next";
 interface FileInputProps {
   sendChange: (files: File[]) => void;
   file: string;
@@ -53,9 +54,11 @@ const DragDropFileInput: React.FC<FileInputProps> = ({ sendChange, file }) => {
     sendChange([]);
   };
 
+  const { t } = useTranslation();
+
   return (
     <div className="drag-drop-container">
-      <h3 className="title">Attach a document</h3>
+      <h3 className="title">{t("attach_doc")}</h3>
       <input
         id="file-input"
         ref={fileInput}
@@ -74,12 +77,12 @@ const DragDropFileInput: React.FC<FileInputProps> = ({ sendChange, file }) => {
         <embed id="preview" src={file} className={file ? "active" : ""}></embed>
       </label>
       <div className="drag-drop-inner">
-        <p>Drag & drop your files here or</p>
+        <p>{t("drag_and_drop")}</p>
         <button type="button" onClick={handleClick}>
-          Browse Files
+          {t("browse")}
         </button>
         <button type="button" onClick={handleCancel}>
-          Cancel
+          {t("cancel")}
         </button>
       </div>
     </div>

src/Components/FileList/FileList.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import "./FileList.css";
 import FileElement from "./FileElement/FileElement";
+import { useTranslation } from "react-i18next";
 
 interface FileListProps {
   files: File[];
@@ -28,11 +29,11 @@ const FileList: React.FC<FileListProps> = ({
       propagateDelete(file, files[files.length - 1] === file);
     }
   };
-
+  const { t } = useTranslation();
   return (
     <div className={`file-list ${files.length === 0 ? "empty" : ""}`}>
       <div className={`no-element ${files.length === 0 ? "active" : ""}`}>
-        No element to show
+        {t("no_element")}
       </div>
       {[...files].map((file: File, index: number) => (
         <FileElement

src/Components/Header/Header.tsx

@@ -1,32 +1,33 @@
 import cfia from "../../assets/CFIA_Banner.png";
 import "./Header.css";
+import { useTranslation } from "react-i18next";
 const environment = {
   version: "0.0.1",
 };
 
 function Header() {
+  const { t } = useTranslation();
   return (
     <header role={"banner"}>
       <nav>
         <ul>
           <li>
-            <a href="https://inspection.canada.ca/" title="ACIA | CFIA">
+            <a href="https://inspection.canada.ca/" title={t("title_link")}>
               <img
                 src={cfia}
                 id="header-img"
-                alt="CFIA logo"
-                aria-label="Link to CFIA | Lien à l'ACIA"
+                alt={t("logo")}
+                aria-label="Link to CFIA | Lien à l'ACIA" // not sure if i need to make the traduction here.
               />
             </a>
           </li>
           <li id="version">
-            Alpha Version{" "}
+            {t("Version")}{" "}
             {environment.version !== "" ? "v" + environment.version : ""}
           </li>
         </ul>
       </nav>
     </header>
   );
 }
-
 export default Header;