feat: net transfer badge

src/components/GroupSwitch.tsx

@@ -11,9 +11,7 @@ export default function GroupSwitch({
   setCurrentTab: (tab: string) => void;
 }) {
   return (
-    <div
-      className="scrollbar-hidden z-50 flex flex-col items-start overflow-x-scroll rounded-[50px]"
-    >
+    <div className="scrollbar-hidden z-50 flex flex-col items-start overflow-x-scroll rounded-[50px]">
       <div className="flex items-center gap-1 rounded-[50px] bg-stone-100 p-[3px] dark:bg-stone-800">
         {tabs.map((tab: string) => (
           <div

src/components/ServerCard.tsx

@@ -6,6 +6,8 @@ import { NezhaServer } from "@/types/nezha-api";
 import { Card } from "./ui/card";
 import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
+import { Badge } from "./ui/badge";
+import { formatBytes } from "@/lib/format";
 
 export default function ServerCard({
   now,
@@ -101,6 +103,20 @@ export default function ServerCard({
               </div>
             </div>
           </section>
+          <section className={"flex items-center justify-between gap-1"}>
+            <Badge
+              variant="secondary"
+              className="items-center flex-1 justify-center rounded-[8px] text-nowrap text-[11px] border-muted-50 shadow-md shadow-neutral-200/30 dark:shadow-none"
+            >
+              {t("Upload")}:{formatBytes(serverInfo.state.net_out_transfer)}
+            </Badge>
+            <Badge
+              variant="outline"
+              className="items-center flex-1 justify-center rounded-[8px] text-nowrap text-[11px] shadow-md shadow-neutral-200/30 dark:shadow-none"
+            >
+              {t("Download")}:{formatBytes(serverInfo.state.net_in_transfer)}
+            </Badge>
+          </section>
         </div>
       </Card>
     </section>

src/components/ServerDetailChart.tsx

@@ -87,10 +87,10 @@ export default function ServerDetailChart({
   );
 }
 
-function CpuChart({ now,data }: { now: number;data: NezhaServer }) {
+function CpuChart({ now, data }: { now: number; data: NezhaServer }) {
   const [cpuChartData, setCpuChartData] = useState([] as cpuChartData[]);
 
-  const { cpu } = formatNezhaInfo(now,data);
+  const { cpu } = formatNezhaInfo(now, data);
 
   useEffect(() => {
     if (data) {
@@ -189,7 +189,7 @@ function ProcessChart({ now, data }: { now: number; data: NezhaServer }) {
     [] as processChartData[],
   );
 
-  const { process } = formatNezhaInfo(now,data);
+  const { process } = formatNezhaInfo(now, data);
 
   useEffect(() => {
     if (data) {
@@ -276,11 +276,11 @@ function ProcessChart({ now, data }: { now: number; data: NezhaServer }) {
   );
 }
 
-function MemChart({ now,data }: { now: number;data: NezhaServer }) {
+function MemChart({ now, data }: { now: number; data: NezhaServer }) {
   const { t } = useTranslation();
   const [memChartData, setMemChartData] = useState([] as memChartData[]);
 
-  const { mem, swap } = formatNezhaInfo(now,data);
+  const { mem, swap } = formatNezhaInfo(now, data);
 
   useEffect(() => {
     if (data) {
@@ -406,11 +406,11 @@ function MemChart({ now,data }: { now: number;data: NezhaServer }) {
   );
 }
 
-function DiskChart({ now,data }: { now: number;data: NezhaServer }) {
+function DiskChart({ now, data }: { now: number; data: NezhaServer }) {
   const { t } = useTranslation();
   const [diskChartData, setDiskChartData] = useState([] as diskChartData[]);
 
-  const { disk } = formatNezhaInfo(now,data);
+  const { disk } = formatNezhaInfo(now, data);
 
   useEffect(() => {
     if (data) {
@@ -503,13 +503,13 @@ function DiskChart({ now,data }: { now: number;data: NezhaServer }) {
   );
 }
 
-function NetworkChart({ now,data }: { now: number;data: NezhaServer }) {
+function NetworkChart({ now, data }: { now: number; data: NezhaServer }) {
   const { t } = useTranslation();
   const [networkChartData, setNetworkChartData] = useState(
     [] as networkChartData[],
   );
 
-  const { up, down } = formatNezhaInfo(now,data);
+  const { up, down } = formatNezhaInfo(now, data);
 
   useEffect(() => {
     if (data) {
@@ -632,12 +632,12 @@ function NetworkChart({ now,data }: { now: number;data: NezhaServer }) {
   );
 }
 
-function ConnectChart({ now,data }: { now: number;data: NezhaServer }) {
+function ConnectChart({ now, data }: { now: number; data: NezhaServer }) {
   const [connectChartData, setConnectChartData] = useState(
     [] as connectChartData[],
   );
 
-  const { tcp, udp } = formatNezhaInfo(now,data);
+  const { tcp, udp } = formatNezhaInfo(now, data);
 
   useEffect(() => {
     if (data) {

src/components/ServerDetailOverview.tsx

@@ -4,10 +4,11 @@ import ServerFlag from "@/components/ServerFlag";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent } from "@/components/ui/card";
 import { useWebSocketContext } from "@/hooks/use-websocket-context";
-import { cn, formatBytes, formatNezhaInfo } from "@/lib/utils";
+import { cn, formatNezhaInfo } from "@/lib/utils";
 import { NezhaWebsocketResponse } from "@/types/nezha-api";
 import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
+import { formatBytes } from "@/lib/format";
 
 export default function ServerDetailOverview({
   server_id,
@@ -37,7 +38,10 @@ export default function ServerDetailOverview({
     return <ServerDetailLoading />;
   }
 
-  const { name, online, uptime, version } = formatNezhaInfo(nezhaWsData.now,server);
+  const { name, online, uptime, version } = formatNezhaInfo(
+    nezhaWsData.now,
+    server,
+  );
 
   return (
     <div>

src/components/ServerOverview.tsx

@@ -1,6 +1,7 @@
 import { Card, CardContent } from "@/components/ui/card";
-import { cn, formatBytes } from "@/lib/utils";
+import { cn } from "@/lib/utils";
 import { useTranslation } from "react-i18next";
+import { formatBytes } from "@/lib/format";
 
 type ServerOverviewProps = {
   online: number;