Add: Translation files

package.json

@@ -43,13 +43,15 @@
     "chart.js": "^4.4.5",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "i18next": "^23.16.5",
     "jotai": "^2.10.1",
     "lucide-react": "^0.453.0",
     "react": "^18.3.1",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.1.2",
     "react-hook-form": "^7.53.1",
+    "react-i18next": "^15.1.1",
     "tailwind-merge": "^2.5.4",
     "tailwind-variants": "^0.2.1",
     "tailwindcss-animate": "^1.0.7",

src/App.tsx

@@ -14,6 +14,8 @@ import ScreenTemplate from "./template/ScreenTemplate";
 import Settings from "./template/Settings";
 import SideMenu from "./template/SideMenu";
 import type { SelectedDisplayType } from "./types/ui";
+import "@/lib/i18n";
+import { useTranslation } from "react-i18next";
 
 const onError = (error: Error, info: ErrorInfo) => {
   console.error("error.message", error.message);
@@ -28,6 +30,7 @@ const Page = () => {
   const { toggle } = useDarkMode();
   const { backgroundImage: nextImage, initBackgroundImage } =
     useBackgroundImage();
+  const { t } = useTranslation();
 
   const [currentImage, setCurrentImage] = useState(nextImage);
   const [opacity, setOpacity] = useState(1);
@@ -68,7 +71,7 @@ const Page = () => {
     ),
     usage: <ChartTemplate />,
     settings: (
-      <ScreenTemplate title="Settings">
+      <ScreenTemplate title={t("pages.settings.name")}>
         <Settings />
       </ScreenTemplate>
     ),

src/components/charts/DoughnutChart.tsx

@@ -1,5 +1,5 @@
 import { useSettingsAtom } from "@/atom/useSettingsAtom";
-import { displayDataType, displayHardType } from "@/consts/chart";
+import { displayHardType } from "@/consts/chart";
 import type { ChartDataType, HardwareDataType } from "@/types/hardwareDataType";
 import { Lightning, Speedometer, Thermometer } from "@phosphor-icons/react";
 import {
@@ -10,6 +10,7 @@ import {
   Tooltip,
 } from "chart.js";
 import { Doughnut } from "react-chartjs-2";
+import { useTranslation } from "react-i18next";
 
 ChartJS.register(ArcElement, Tooltip, Legend);
 
@@ -26,6 +27,14 @@ const DoughnutChart = ({
 }) => {
   const { settings } = useSettingsAtom();
 
+  const { t } = useTranslation();
+
+  const displayDataType: Record<HardwareDataType, string> = {
+    usage: t("shared.usage"),
+    temp: t("shared.temperature"),
+    clock: t("shared.clock"),
+  };
+
   const data = {
     datasets: [
       {

src/consts/chart.ts

@@ -13,12 +13,6 @@ export const displayHardType: Record<ChartDataType, string> = {
   gpu: "GPU",
 } as const;
 
-export const displayDataType: Record<HardwareDataType, string> = {
-  temp: "Temperature",
-  usage: "Usage",
-  clock: "Clock",
-} as const;
-
 export const sizeOptions = ["sm", "md", "lg", "xl", "2xl"] as const;
 
 export const defaultColorRGB: Record<ChartDataType, string> = {

src/i18n/en.json

@@ -0,0 +1,46 @@
+{
+  "shared": {
+    "usage": "Usage",
+    "temperature": "Temperature",
+    "name": "Name",
+    "vendor": "Vendor",
+    "coreCount": "Core Count",
+    "defaultClockSpeed": "Default Clock Speed",
+    "memory": "Memory",
+    "memorySize": "Memory Size",
+    "memorySizeShared": "Memory Size (Shared)",
+    "memorySizeDedicated": "Memory Size (Dedicated)",
+    "memoryType": "Memory Type",
+    "totalMemory": "Total Memory",
+    "memoryCount": "Memory Count",
+    "memoryClockSpeed": "Memory Clock",
+    "clock": "Clock"
+  },
+
+  "pages": {
+    "dashboard": {
+      "name": "Dashboard"
+    },
+    "usage": {
+      "name": "Usage"
+    },
+    "settings": {
+      "name": "Settings",
+      "general": {
+        "name": "General",
+        "language": "Language",
+        "theme": "Theme",
+        "hardwareType": "Hardware Type"
+      },
+      "customTheme": {
+        "name": "Custom Theme",
+        "preview": "Preview",
+        "lineColor": "line Color",
+        "graphStyle": "Graph Style"
+      },
+      "backgroundImage": {
+        "name": "Background Image"
+      }
+    }
+  }
+}

src/i18n/ja.json

@@ -0,0 +1,46 @@
+{
+  "shared": {
+    "usage": "使用率",
+    "temperature": "温度",
+    "name": "名前",
+    "vendor": "ベンダー",
+    "coreCount": "コア数",
+    "defaultClockSpeed": "標準クロック数",
+    "memory": "メモリ",
+    "memorySize": "メモリ容量",
+    "memorySizeShared": "メモリ容量（共有）",
+    "memorySizeDedicated": "メモリ容量（専用）",
+    "memoryType": "メモリタイプ",
+    "totalMemory": "合計メモリ",
+    "memoryCount": "メモリ枚数",
+    "memoryClockSpeed": "メモリクロック数",
+    "clock": "クロック数"
+  },
+
+  "pages": {
+    "dashboard": {
+      "name": "ダッシュボード"
+    },
+    "usage": {
+      "name": "ハードウェア使用率"
+    },
+    "settings": {
+      "name": "設定",
+      "general": {
+        "name": "一般",
+        "language": "言語",
+        "theme": "カラーモード",
+        "hardwareType": "ハードウェア種別"
+      },
+      "customTheme": {
+        "name": "カスタマイズ",
+        "preview": "プレビュー",
+        "lineColor": "グラフの色",
+        "graphStyle": "カスタムグラフ"
+      },
+      "backgroundImage": {
+        "name": "壁紙"
+      }
+    }
+  }
+}

src/lib/i18n.ts

@@ -0,0 +1,28 @@
+import en from "@/i18n/en.json";
+import ja from "@/i18n/ja.json";
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+
+const resources = {
+  en: {
+    translation: en,
+  },
+  ja: {
+    translation: ja,
+  },
+};
+
+i18n
+  .use(initReactI18next) // passes i18n down to react-i18next
+  .init({
+    resources,
+    lng: "en", // language to use, more information here: https://www.i18next.com/overview/configuration-options#languages-namespaces-resources
+    // you can use the i18n.changeLanguage function to change the language manually: https://www.i18next.com/overview/api#changelanguage
+    // if you're using a language detector, do not define the lng option
+
+    interpolation: {
+      escapeValue: false, // react already safes from xss
+    },
+  });
+
+export default i18n;

src/template/Dashboard.tsx

@@ -10,6 +10,7 @@ import DoughnutChart from "@/components/charts/DoughnutChart";
 import ProcessesTable from "@/components/charts/ProcessTable";
 import type { NameValues } from "@/types/hardwareDataType";
 import { useAtom } from "jotai";
+import { useTranslation } from "react-i18next";
 
 const InfoTable = ({ data }: { data: { [key: string]: string | number } }) => {
   return (
@@ -41,6 +42,7 @@ const DataArea = ({ children }: { children: React.ReactNode }) => {
 const CPUInfo = () => {
   const [cpuUsageHistory] = useAtom(cpuUsageHistoryAtom);
   const { hardwareInfo } = useHardwareInfoAtom();
+  const { t } = useTranslation();
 
   return (
     hardwareInfo.cpu && (
@@ -53,8 +55,8 @@ const CPUInfo = () => {
         />
         <InfoTable
           data={{
-            Name: hardwareInfo.cpu.name,
-            Vendor: hardwareInfo.cpu.vendor,
+            name: hardwareInfo.cpu.name,
+            vendor: hardwareInfo.cpu.vendor,
             "Core Count": hardwareInfo.cpu.coreCount,
             "Default Clock Speed": `${hardwareInfo.cpu.clock} ${hardwareInfo.cpu.clockUnit}`,
           }}