fix: i18n

nezhahq · Dec 5, 2024 · 4032ff6 · 4032ff6
1 parent a1f5b9d
commit 4032ff6
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 11 deletions.
diff --git a/src/components/CycleTransferStatsClient.tsx b/src/components/CycleTransferStatsClient.tsx
@@ -3,6 +3,7 @@ import { cn } from "@/lib/utils";
 import { formatBytes } from "@/lib/format";
 import AnimatedCircularProgressBar from "./ui/animated-circular-progress-bar";
 import { CircleStackIcon } from "@heroicons/react/24/outline";
+import { useTranslation } from "react-i18next";
 
 interface CycleTransferStatsClientProps {
   name: string;
@@ -21,6 +22,7 @@ interface CycleTransferStatsClientProps {
 export const CycleTransferStatsClient: React.FC<
   CycleTransferStatsClientProps
 > = ({ name, from, to, max, serverStats, className }) => {
+  const { t } = useTranslation();
   return (
     <div
       className={cn(
@@ -71,16 +73,17 @@ export const CycleTransferStatsClient: React.FC<
 
             <section className="flex justify-between items-center mt-2">
               <span className="text-[13px] text-stone-800 dark:text-stone-400 font-medium">
-                {formatBytes(transfer)} used
+                {formatBytes(transfer)} {t("cycleTransfer.used")}
               </span>
               <span className="text-xs text-stone-500 dark:text-stone-400 font-normal">
-                {formatBytes(max)} total
+                {formatBytes(max)} {t("cycleTransfer.total")}
               </span>
             </section>
 
             <section className="flex justify-between items-center mt-2">
               <div className="text-xs text-stone-500 dark:text-stone-400">
-                Next update: {new Date(nextUpdate).toLocaleString()}
+                {t("cycleTransfer.nextUpdate")}:{" "}
+                {new Date(nextUpdate).toLocaleString()}
               </div>
             </section>
           </div>

diff --git a/src/components/ServerCardInline.tsx b/src/components/ServerCardInline.tsx
@@ -135,11 +135,11 @@ export default function ServerCardInline({
                 {t("serverCard.uptime")}
               </p>
               <div className="flex items-center text-xs font-semibold">
-                {(uptime / 86400).toFixed(0)} {"Days"}
+                {(uptime / 86400).toFixed(0)} {t("serverCard.days")}
               </div>
             </div>
             <div className={"flex w-14 flex-col"}>
-              <p className="text-xs text-muted-foreground">{t("CPU")}</p>
+              <p className="text-xs text-muted-foreground">{"CPU"}</p>
               <div className="flex items-center text-xs font-semibold">
                 {cpu.toFixed(2)}%
               </div>

diff --git a/src/components/ServerDetailOverview.tsx b/src/components/ServerDetailOverview.tsx
@@ -96,7 +96,8 @@ export default function ServerDetailOverview({
               </p>
               <div className="text-xs">
                 {" "}
-                {online ? (uptime / 86400).toFixed(0) : "N/A"} {"Days"}{" "}
+                {online ? (uptime / 86400).toFixed(0) : "N/A"}{" "}
+                {t("serverDetail.days")}
               </div>
             </section>
           </CardContent>

diff --git a/src/components/ServiceTracker.tsx b/src/components/ServiceTracker.tsx
@@ -5,8 +5,11 @@ import { fetchService } from "@/lib/nezha-api";
 import { ServiceData } from "@/types/nezha-api";
 import { CycleTransferStatsCard } from "./CycleTransferStats";
 import { Loader } from "./loading/Loader";
+import { useTranslation } from "react-i18next";
+import { ExclamationTriangleIcon } from "@heroicons/react/20/solid";
 
 export const ServiceTracker: React.FC = () => {
+  const { t } = useTranslation();
   const { data: serviceData, isLoading } = useQuery({
     queryKey: ["service"],
     queryFn: () => fetchService(),
@@ -40,7 +43,7 @@ export const ServiceTracker: React.FC = () => {
     return (
       <div className="mt-4 text-sm font-medium flex items-center gap-1">
         <Loader visible={true} />
-        Loading...
+        {t("serviceTracker.loading")}
       </div>
     );
   }
@@ -50,7 +53,10 @@ export const ServiceTracker: React.FC = () => {
     !serviceData?.data?.cycle_transfer_stats
   ) {
     return (
-      <div className="mt-4 font-thin text-sm">No service data available</div>
+      <div className="mt-4 text-sm font-medium flex items-center gap-1">
+        <ExclamationTriangleIcon className="w-4 h-4" />
+        {t("serviceTracker.noService")}
+      </div>
     );
   }
 

diff --git a/src/components/ServiceTrackerClient.tsx b/src/components/ServiceTrackerClient.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { cn } from "@/lib/utils";
 import { Separator } from "./ui/separator";
+import { useTranslation } from "react-i18next";
 
 interface ServiceTrackerProps {
   days: Array<{
@@ -20,6 +21,7 @@ export const ServiceTrackerClient: React.FC<ServiceTrackerProps> = ({
   uptime = 100,
   avgDelay = 0,
 }) => {
+  const { t } = useTranslation();
   return (
     <div
       className={cn(
@@ -40,7 +42,7 @@ export const ServiceTrackerClient: React.FC<ServiceTrackerProps> = ({
           </span>
           <Separator className="h-4 mx-0" orientation="vertical" />
           <span className="text-green-600 font-medium text-sm">
-            {uptime.toFixed(1)}% uptime
+            {uptime.toFixed(1)}% {t("serviceTracker.uptime")}
           </span>
         </div>
       </div>
@@ -61,8 +63,8 @@ export const ServiceTrackerClient: React.FC<ServiceTrackerProps> = ({
       </div>
 
       <div className="flex justify-between text-xs text-stone-500 dark:text-stone-400">
-        <span>30 DAYS AGO</span>
-        <span>TODAY</span>
+        <span>30 {t("serviceTracker.daysAgo")}</span>
+        <span>{t("serviceTracker.today")}</span>
       </div>
     </div>
   );

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -26,16 +26,30 @@
   "serverCard": {
     "mem": "MEM",
     "stg": "STG",
+    "days": "Days",
     "upload": "Upload",
     "download": "Download",
     "system": "System",
     "uptime": "Uptime",
     "totalUpload": "Upload",
     "totalDownload": "Download"
   },
+  "cycleTransfer": {
+    "used": "used",
+    "total": "total",
+    "nextUpdate": "next update"
+  },
+  "serviceTracker": {
+    "noService": "No service data",
+    "uptime": "Uptime",
+    "daysAgo": "days ago",
+    "today": "Today",
+    "loading": "Loading..."
+  },
   "serverDetail": {
     "status": "Status",
     "online": "Online",
+    "days": "Days",
     "offline": "Offline",
     "unknown": "Unknown",
     "uptime": "Uptime",

diff --git a/src/locales/zh-CN/translation.json b/src/locales/zh-CN/translation.json
@@ -26,16 +26,30 @@
   "serverCard": {
     "mem": "内存",
     "stg": "存储",
+    "days": "天",
     "upload": "上传",
     "download": "下载",
     "system": "系统",
     "uptime": "运行时间",
     "totalUpload": "总上传",
     "totalDownload": "总下载"
   },
+  "cycleTransfer": {
+    "used": "已使用",
+    "total": "总计",
+    "nextUpdate": "下次更新"
+  },
+  "serviceTracker": {
+    "noService": "没有服务监测数据",
+    "uptime": "可用率",
+    "daysAgo": "天前",
+    "today": "今天",
+    "loading": "加载中..."
+  },
   "serverDetail": {
     "status": "状态",
     "online": "在线",
+    "days": "天",
     "offline": "离线",
     "unknown": "未知",
     "uptime": "运行时间",

diff --git a/src/locales/zh-TW/translation.json b/src/locales/zh-TW/translation.json
@@ -26,16 +26,30 @@
   "serverCard": {
     "mem": "內存",
     "stg": "存儲",
+    "days": "天",
     "upload": "上傳",
     "download": "下載",
     "system": "系統",
     "uptime": "運行時間",
     "totalUpload": "總上傳",
     "totalDownload": "總下載"
   },
+  "cycleTransfer": {
+    "used": "已使用",
+    "total": "總量",
+    "nextUpdate": "下次更新"
+  },
+  "serviceTracker": {
+    "noService": "沒有服務監控數據",
+    "uptime": "可用率",
+    "daysAgo": "天前",
+    "today": "今天",
+    "loading": "載入中..."
+  },
   "serverDetail": {
     "status": "狀態",
     "online": "線上",
+    "days": "天",
     "offline": "離線",
     "unknown": "未知",
     "uptime": "運行時間",