Root work

packages/webapp/package.json

@@ -19,6 +19,7 @@
     "@effect/rpc": "^0.71.0",
     "@fontsource/work-sans": "^5.2.8",
     "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@tanstack/react-router": "^1.131.48",
     "@website/common": "workspace:*",
     "class-variance-authority": "^0.7.1",

packages/webapp/src/components/ui/tooltip.tsx

@@ -0,0 +1,50 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import type * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Content
+      data-slot="tooltip-content"
+      sideOffset={sideOffset}
+      className={cn(
+        "fade-in-0 zoom-in-95 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 origin-(--radix-tooltip-content-transform-origin) animate-in overflow-hidden rounded-base border-2 border-border bg-main px-3 py-1.5 font-base text-main-foreground text-sm data-[state=closed]:animate-out",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

packages/webapp/src/i18n/en.ts

@@ -1,7 +1,14 @@
 export const en = {
     common: {},
+
     nav: {
-        gitRepos: "Git repositories",
-        sourceCode: "Source code",
+        gitRepos: {
+            title: "Git repositories",
+            tooltip: "All the public repositories on my Git server",
+        },
+        sourceCode: {
+            title: "Source code",
+            tooltip: "Source code for this website",
+        },
     },
 }

packages/webapp/src/i18n/fr.ts

@@ -4,7 +4,13 @@ import type { en } from "./en"
 export const fr = {
     common: {},
     nav: {
-        gitRepos: "Dépôts Git",
-        sourceCode: "Code source",
+        gitRepos: {
+            title: "Dépôts Git",
+            tooltip: "Tous les dépôts publics de mon serveur Git",
+        },
+        sourceCode: {
+            title: "Code source",
+            tooltip: "Code source de ce site",
+        },
     },
 } satisfies typeof en

packages/webapp/src/i18n/index.ts

@@ -12,6 +12,7 @@ await i18n
     .use(initReactI18next)
     .use(LanguageDetector)
     .init({
+        fallbackLng: "en",
         supportedLngs: ["en", "fr"],
         defaultNS,
         resources,

packages/webapp/src/routes/__root.tsx

@@ -5,6 +5,7 @@ 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"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
 
 
 export const Route = createRootRoute({
@@ -17,22 +18,47 @@ function RootComponent() {
     return <>
         <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"><DiGit /> {t($ => $.gitRepos, { ns: "nav" })}</a>
-                </Button>
+                <TooltipProvider>
+                    <Tooltip>
+                        <TooltipTrigger asChild>
+                            <Button asChild>
+                                <a href="https://git.valverde.cloud"><DiGit /> {t($ => $.gitRepos.title, { ns: "nav" })}</a>
+                            </Button>
+                        </TooltipTrigger>
 
-                <Button asChild>
-                    <a href="https://git.valverde.cloud/thilawyn/website"><FaCode /> {t($ => $.sourceCode, { ns: "nav" })}</a>
-                </Button>
+                        <TooltipContent><p>{t($ => $.gitRepos.tooltip, { ns: "nav" })}</p></TooltipContent>
+                    </Tooltip>
+                </TooltipProvider>
+
+                <TooltipProvider>
+                    <Tooltip>
+                        <TooltipTrigger asChild>
+                            <Button asChild>
+                                <a href="https://git.valverde.cloud/thilawyn/website"><FaCode /> {t($ => $.sourceCode.title, { ns: "nav" })}</a>
+                            </Button>
+                        </TooltipTrigger>
+
+                        <TooltipContent><p>{t($ => $.sourceCode.tooltip, { ns: "nav" })}</p></TooltipContent>
+                    </Tooltip>
+                </TooltipProvider>
 
                 <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 className="flex flex-row items-center justify-center gap-2">
+                <Button
+                    variant={i18n.language !== "en" ? "default" : "noShadow"}
+                    onClick={() => i18n.changeLanguage("en")}
+                >
+                    🇬🇧 English
+                </Button>
+
+                <Button
+                    variant={i18n.language !== "fr" ? "default" : "noShadow"}
+                    onClick={() => i18n.changeLanguage("fr")}
+                >
+                    🇫🇷 Français
+                </Button>
             </div>
         </div>