Add: localization for storage labels in BarChart and Dashboard

shm11C3 · Dec 7, 2024 · 53b2c18 · 53b2c18
1 parent 1bd21a6
commit 53b2c18
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 3 deletions.
diff --git a/src/components/charts/Bar.tsx b/src/components/charts/Bar.tsx
@@ -7,6 +7,7 @@ import {
   ChartTooltipContent,
 } from "@/components/ui/chart";
 import type { SizeUnit } from "@/rspc/bindings";
+import { useTranslation } from "react-i18next";
 import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
 
 const chartKey = ["used", "free"] as const;
@@ -24,16 +25,18 @@ export const StorageBarChart = ({
   chartData: StorageBarChartData[];
   unit: SizeUnit;
 }) => {
+  const { t } = useTranslation();
+
   const StorageChartConfig: Record<
     (typeof chartKey)[number],
     { label: string; color: string }
   > = {
     used: {
-      label: `Used (${unit})`,
+      label: `${t("shared.used")} (${unit})`,
       color: "hsl(var(--chart-1))",
     },
     free: {
-      label: `Free (${unit})`,
+      label: `${t("shared.free")} (${unit})`,
       color: "hsl(var(--chart-2))",
     },
   } satisfies ChartConfig;

diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -19,12 +19,15 @@
     "clock": "Clock",
     "process": "Process",
     "reset": "Reset",
+    "storage": "Storage",
     "driveName": "Drive Name",
     "driveType": "Drive Type",
     "driveTotalSpace": "Drive Total Space",
     "driveUsedSpace": "Drive Used Space",
     "driveFreeSpace": "Drive Free Space",
     "driveFileSystem": "Drive File System",
+    "used": "Used",
+    "free": "Free",
     "other": "Other"
   },
 

diff --git a/src/i18n/ja.json b/src/i18n/ja.json
@@ -19,12 +19,15 @@
     "clock": "クロック数",
     "process": "プロセス",
     "reset": "リセット",
+    "storage": "ストレージ",
     "driveName": "ドライブ名",
     "driveType": "ドライブタイプ",
     "driveTotalSpace": "ドライブ容量",
     "driveUsedSpace": "ドライブ使用量",
     "driveFreeSpace": "ドライブ空き容量",
     "driveFileSystem": "ファイルシステム",
+    "used": "使用中",
+    "free": "空き",
     "other": "その他"
   },
 

diff --git a/src/template/Dashboard.tsx b/src/template/Dashboard.tsx
@@ -190,7 +190,7 @@ const StorageDataInfo = () => {
 
   return (
     <div className="p-2">
-      <h3 className="text-lg font-bold">Storage</h3>
+      <h3 className="text-lg font-bold">{t("shared.storage")}</h3>
       <div className="flex">
         <div className="w-1/2">
           {sortedStorage.map((storage) => {