feat(i18n): implement localization using LinguiJS

apps/client/src/providers/index.tsx

@@ -1,5 +1,3 @@
-import "@/client/libs/dayjs";
-
 import { TooltipProvider } from "@reactive-resume/ui";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { HelmetProvider } from "react-helmet-async";
@@ -7,21 +5,24 @@ import { Outlet } from "react-router-dom";
 
 import { queryClient } from "../libs/query-client";
 import { DialogProvider } from "./dialog";
+import { LocaleProvider } from "./locale";
 import { ThemeProvider } from "./theme";
 import { Toaster } from "./toaster";
 
 export const Providers = () => (
-  <QueryClientProvider client={queryClient}>
-    <ThemeProvider>
-      <TooltipProvider>
-        <DialogProvider>
-          <HelmetProvider>
-            <Outlet />
+  <LocaleProvider>
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider>
+        <TooltipProvider>
+          <DialogProvider>
+            <HelmetProvider>
+              <Outlet />
 
-            <Toaster />
-          </HelmetProvider>
-        </DialogProvider>
-      </TooltipProvider>
-    </ThemeProvider>
-  </QueryClientProvider>
+              <Toaster />
+            </HelmetProvider>
+          </DialogProvider>
+        </TooltipProvider>
+      </ThemeProvider>
+    </QueryClientProvider>
+  </LocaleProvider>
 );

apps/client/src/providers/locale.tsx

@@ -0,0 +1,27 @@
+import "@/client/libs/dayjs";
+
+import { i18n } from "@lingui/core";
+import { detect, fromNavigator, fromStorage, fromUrl } from "@lingui/detect-locale";
+import { I18nProvider } from "@lingui/react";
+import { useEffect } from "react";
+
+import { defaultLocale, dynamicActivate } from "../libs/lingui";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export const LocaleProvider = ({ children }: Props) => {
+  useEffect(() => {
+    const detectedLocale = detect(
+      fromUrl("lang"),
+      fromStorage("lang"),
+      fromNavigator(),
+      defaultLocale,
+    )!;
+
+    dynamicActivate(detectedLocale);
+  }, []);
+
+  return <I18nProvider i18n={i18n}>{children}</I18nProvider>;
+};