Work

packages/webapp/package.json

@@ -31,6 +31,7 @@
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-i18next": "^16.0.1",
+    "react-icons": "^5.5.0",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.13"
   },

packages/webapp/src/i18n/en.ts

@@ -1,5 +1,6 @@
 export const en = {
     nav: {
         gitRepos: "Git repositories",
-    }
+        sourceCode: "Source code",
+    },
 }

packages/webapp/src/i18n/fr.ts

@@ -4,5 +4,6 @@ import type { en } from "./en"
 export const fr = {
     nav: {
         gitRepos: "Dépôts Git",
-    }
+        sourceCode: "Code source",
+    },
 } satisfies typeof en

packages/webapp/src/routes/__root.tsx

@@ -1,6 +1,8 @@
 import { createRootRoute, Outlet } from "@tanstack/react-router"
 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools"
 import { useTranslation } from "react-i18next"
+import { DiGit } from "react-icons/di"
+import { FaCode } from "react-icons/fa"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent } from "@/components/ui/card"
 
@@ -10,17 +12,28 @@ export const Route = createRootRoute({
 })
 
 function RootComponent() {
-    const { t } = useTranslation()
+    const { t, i18n } = useTranslation()
 
     return <>
-        <div className="container mt-10 mr-auto ml-auto flex flex-row items-center justify-between">
-            <div className="flex grow-1 flex-row items-center justify-center gap-2">
+        <div className="container mt-10 mr-auto ml-auto flex flex-row items-center justify-center gap-20">
+            <div className="flex flex-row items-center justify-center gap-2">
                 <Button asChild>
-                    <a href="https://git.valverde.cloud">{t("nav.gitRepos")}</a>
+                    <a href="https://git.valverde.cloud"><DiGit /> {t("nav:gitRepos")}</a>
+                </Button>
+
+                <Button asChild>
+                    <a href="https://git.valverde.cloud/thilawyn/website"><FaCode /> {t("nav:sourceCode")}</a>
                 </Button>
 
                 <Button>Resumé</Button>
             </div>
+
+            <div className="flex flex-row items-center justify-center gap-4">
+                <div>
+                    <a href="#" onClick={() => i18n.changeLanguage("en")}>English</a> /&nbsp;
+                    <a href="#" onClick={() => i18n.changeLanguage("fr")}>Français</a>
+                </div>
+            </div>
         </div>
 
         <div className="mx-auto w-[750px] max-w-full px-5 pt-28 pb-10 text-foreground">