feat(lang): internationalisation of header and navigation

frontend/src/App.jsx

@@ -12,7 +12,7 @@ import LeaderboardPage from "./pages/LeaderboardPage/LeaderboardPage";
 import AddModelPage from "./pages/AddModelPage/AddModelPage";
 import QuotePage from "./pages/QuotePage/QuotePage";
 import VoteModelPage from "./pages/VoteModelPage/VoteModelPage";
-import { Header } from "@codegouvfr/react-dsfr/Header";
+import Header from "./components/Header/Header";
 import { Badge } from "@codegouvfr/react-dsfr/Badge";
 import Footer from "./components/Footer/Footer";
 import MuiDsfrThemeProvider from "@codegouvfr/react-dsfr/mui";
@@ -93,22 +93,7 @@ function App() {
                   color: "text.primary",
                 }}
               >
-                <Header
-                  brandTop={<>République <br/> française</>}
-                  homeLinkProps={{
-                    href: '/',
-                    title: 'Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)'
-                  }}
-                  quickAccessItems={[
-                    // other quick access items...
-                    headerFooterDisplayItem,
-                    <LanguageSelect />
-                  ]}
-                  id="fr-header-simple-header-with-service-title-and-tagline"
-                  serviceTagline="Tableau de référence pour les grands modèles de langages en français"
-                  serviceTitle={<>Leaderboard des GML pour le français{' '}<Badge as="span" noIcon severity="success">Beta</Badge></>}
-                  navigation={<Navigation />}
-                />
+                <Header />
                 <Box
                   sx={{
                     flex: 1,

frontend/src/components/Header/Header.tsx

@@ -0,0 +1,34 @@
+import { Header } from "@codegouvfr/react-dsfr/Header";
+import { headerFooterDisplayItem } from "@codegouvfr/react-dsfr/Display";
+import { LanguageSelect } from "../LanguageSelect/LanguageSelect";
+import Navigation from "../Navigation/Navigation";
+import { Badge } from "@codegouvfr/react-dsfr/Badge";
+import { useTranslation, declareComponentKeys } from "i18n";
+
+const header = () => {
+    const {t} = useTranslation({header});
+    return <Header
+    brandTop={<>République <br/> française</>}
+    homeLinkProps={{
+      href: '/',
+      title: 'Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)'
+    }}
+    quickAccessItems={[
+      // other quick access items...
+      headerFooterDisplayItem,
+      <LanguageSelect />
+    ]}
+    id="fr-header-simple-header-with-service-title-and-tagline"
+    serviceTagline={t("tagline")}
+    serviceTitle={<>{t("service")}{' '}<Badge as="span" noIcon severity="success">Beta</Badge></>}
+    navigation={<Navigation />}
+  />
+}
+
+const { i18n } = declareComponentKeys<
+| "tagline"
+| "service"
+>()({ header });
+export type I18n = typeof i18n;
+
+export default header;

frontend/src/components/Navigation/{Navigation.jsx → Navigation.tsx}

@@ -1,15 +1,17 @@
 import React, { useState } from "react";
 import { useLocation, useNavigate, useSearchParams } from "react-router-dom";
 import {MainNavigation} from "@codegouvfr/react-dsfr/MainNavigation";
+import { useTranslation, declareComponentKeys } from "i18n";
 
 const Navigation = () => {
   const location = useLocation();
   const navigate = useNavigate();
   const [active, setActive] = useState(0);
   const [searchParams] = useSearchParams();
+  const {t} = useTranslation({Navigation});
 
   // Function to sync URL with parent HF page
-  const syncUrlWithParent = (queryString, hash) => {
+  const syncUrlWithParent = (queryString: any, hash:any) => {
     // Check if we're in an HF Space iframe
     const isHFSpace = window.location !== window.parent.location;
     if (isHFSpace) {
@@ -29,7 +31,7 @@ const Navigation = () => {
     }
   };
 
-  const handleNavigation = (index, path) => (e) => {
+  const handleNavigation = (index:any, path:any) => (e:any) => {
     e.preventDefault();
     const searchString = searchParams.toString();
     const queryString = searchString ? `?${searchString}` : "";
@@ -64,7 +66,7 @@ const Navigation = () => {
                     target: '_self',
                     onClick: handleNavigation(1, "/add")
                 },
-                text: "Submit model",
+                text: t("submit"),
             },
             // {
             //     isActive: active === 2,
@@ -204,4 +206,9 @@ const Navigation = () => {
 //   );
 };
 
+const { i18n } = declareComponentKeys<
+| "submit"
+>()({ Navigation });
+export type I18n = typeof i18n;
+
 export default Navigation;

frontend/src/i18n.tsx

@@ -1,4 +1,5 @@
 import { createI18nApi, declareComponentKeys } from "i18nifty";
+export {declareComponentKeys};
 
 //List the languages you with to support
 export const languages = ["en", "fr"] as const;
@@ -12,7 +13,7 @@ export type Language = typeof languages[number];
 export type LocalizedString = Parameters<typeof resolveLocalizedString>[0];
 
 export const {
-	useTranslation, 
+	useTranslation,
 	resolveLocalizedString, 
 	useLang, 
 	$lang,
@@ -21,6 +22,8 @@ export const {
 	getTranslation,
 } = createI18nApi<
     | import ("pages/LeaderboardPage/LeaderboardPage").I18n
+    | import ("components/Header/Header").I18n
+    | import ("components/Navigation/Navigation").I18n
 >()(
     { 
       languages, 
@@ -38,6 +41,13 @@ export const {
                     </>
                 )
             },
+            "header": {
+                "tagline": "Reference table for large language models in french",
+                "service": "LLM leaderboard for the french language"
+            },
+            "Navigation": {
+                "submit": "Submit"
+            }
         },
 	/* spell-checker: disable */
 	"fr": {
@@ -51,6 +61,13 @@ export const {
                     </>
                 )
             },
+            "header": {
+                "tagline": "Tableau de référence pour les grands modèles de langages en français",
+                "service": "Leaderboard des GML pour le français"
+            },
+            "Navigation": {
+                "submit": "Soumettre"
+            }
         }
 	/* spell-checker: enable */
     }