fix: i18n

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>

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>

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>

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>
     );
   }
 

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>
   );