feat: init i18n

src/components/Header.tsx

@@ -1,4 +1,3 @@
-// import { LanguageSwitcher } from "@/components/LanguageSwitcher";
 import { ModeToggle } from "@/components/ThemeSwitcher";
 import { Separator } from "@/components/ui/separator";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -6,6 +5,8 @@ import { fetchLoginUser } from "@/lib/nezha-api";
 import { useQuery } from "@tanstack/react-query";
 import { DateTime } from "luxon";
 import { useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { LanguageSwitcher } from "./LanguageSwitcher";
 
 function Header() {
   return (
@@ -32,7 +33,7 @@ function Header() {
         </section>
         <section className="flex items-center gap-2">
           <DashboardLink />
-          {/* <LanguageSwitcher /> */}
+          <LanguageSwitcher />
           <ModeToggle />
         </section>
       </section>
@@ -80,6 +81,7 @@ const useInterval = (callback: () => void, delay: number | null) => {
   }, [delay]);
 };
 function Overview() {
+  const { t } = useTranslation();
   const [mouted, setMounted] = useState(false);
   useEffect(() => {
     setMounted(true);
@@ -94,7 +96,7 @@ function Overview() {
   }, 1000);
   return (
     <section className={"mt-10 flex flex-col md:mt-16"}>
-      <p className="text-base font-semibold">👋 Overview</p>
+      <p className="text-base font-semibold">👋 {t("overview")}</p>
       <div className="flex items-center gap-1.5">
         <p className="text-sm font-medium opacity-50">where the time is</p>
         {mouted ? (