feat: setup i18next

src/routes/__root.tsx

@@ -17,6 +17,12 @@ export const Route = createRootRoute({
       <hr />
       <Outlet />
       <TanStackDevtools
+        config={{
+          defaultOpen: false,
+          panelLocation: "bottom",
+          theme: "dark",
+          position: "middle-left",
+        }}
         plugins={[
           {
             name: "TanStack Query",

src/routes/index.tsx

@@ -1,10 +1,25 @@
 import { createFileRoute } from "@tanstack/react-router";
+import { useTranslation } from "react-i18next";
+import { useEffect, useState } from "react";
+import { languages } from "../i18next";
 
 export const Route = createFileRoute("/")({
   component: () => {
+    const { t, i18n } = useTranslation();
+
+    const [langIdx, setLangIdx] = useState(0);
+    useEffect(() => {
+      i18n.changeLanguage(languages[langIdx].key);
+    }, [langIdx, i18n]);
+
     return (
       <div className="p-2">
-        <h3>Welcome Home!</h3>
+        <h3>
+          {t("hello")}
+          <button onClick={() => setLangIdx((langIdx + 1) % languages.length)}>
+            {i18n.language}
+          </button>
+        </h3>
       </div>
     );
   },