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/App.tsx

@@ -4,19 +4,21 @@
 import NoPage from "./Pages/NoPage/NoPage";
 import "./App.css";
 import Header from "./Components/Header/Header";
+import LanguageSwitcherButton from "./Components/LanguageChanger/LanguageChanger";
+
 
 function App() {
   return (
-    <BrowserRouter>
-      <Header />
-      <Routes>
-        <Route path="/">
-          <Route index element={<HomePage />} />
-          <Route path="Json" element={<JsonPage />} />
-          <Route path="*" element={<NoPage />} />
-        </Route>
-      </Routes>
-    </BrowserRouter>
+      <BrowserRouter>
+        <Header />
+        <Routes>
+          <Route path="/">
+            <Route index element={<HomePage />} />
+            <Route path="Json" element={<JsonPage/>}/>
+            <Route path="*" element={<NoPage />} />
+          </Route>
+        </Routes>
+      </BrowserRouter>
   );
 }
 

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/FileElement/FileElement.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from "react";
-import "./FileElement.css";
+import "./FileElement.css"
 interface FileElementProps {
   key: number;
   file: File;

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[];
@@ -27,12 +28,12 @@ const FileList: React.FC<FileListProps> = ({
     } else {
       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