From 88119041338d30b1da1d09555e6661dacc7de3db Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Tue, 3 Dec 2024 15:04:13 +0800
Subject: [PATCH] fix: cycle card grid

---
 src/components/CycleTransferStats.tsx       |  47 ++++----
 src/components/CycleTransferStatsClient.tsx | 112 ++++++++++----------
 2 files changed, 80 insertions(+), 79 deletions(-)

diff --git a/src/components/CycleTransferStats.tsx b/src/components/CycleTransferStats.tsx
index c70f3e5..60155c5 100644
--- a/src/components/CycleTransferStats.tsx
+++ b/src/components/CycleTransferStats.tsx
@@ -14,32 +14,35 @@ export const CycleTransferStatsCard: React.FC<CycleTransferStatsProps> = ({
   return (
     <section className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-4">
       {Object.entries(cycleStats).map(([cycleId, cycleData]) => {
-        const serverStats = cycleData.server_name 
-          ? Object.entries(cycleData.server_name).map(
-              ([serverId, serverName]) => ({
-                serverId,
-                serverName,
-                transfer: cycleData.transfer?.[serverId] || 0,
-                nextUpdate: cycleData.next_update?.[serverId],
-              })
-            )
-          : [];
+        if (!cycleData.server_name) {
+          return null;
+        }
+
+        return Object.entries(cycleData.server_name).map(([serverId, serverName]) => {
+          const transfer = cycleData.transfer?.[serverId] || 0;
+          const nextUpdate = cycleData.next_update?.[serverId];
 
-          if (serverStats.length === 0) {
+          if (!transfer && !nextUpdate) {
             return null;
           }
 
-        return (
-          <CycleTransferStatsClient
-            key={cycleId}
-            name={cycleData.name}
-            from={cycleData.from}
-            to={cycleData.to}
-            max={cycleData.max}
-            serverStats={serverStats}
-            className={className}
-          />
-        );
+          return (
+            <CycleTransferStatsClient
+              key={`${cycleId}-${serverId}`}
+              name={cycleData.name}
+              from={cycleData.from}
+              to={cycleData.to}
+              max={cycleData.max}
+              serverStats={[{
+                serverId,
+                serverName,
+                transfer,
+                nextUpdate: nextUpdate || "",
+              }]}
+              className={className}
+            />
+          );
+        });
       })}
     </section>
   );
diff --git a/src/components/CycleTransferStatsClient.tsx b/src/components/CycleTransferStatsClient.tsx
index 541dc3b..78e25a8 100644
--- a/src/components/CycleTransferStatsClient.tsx
+++ b/src/components/CycleTransferStatsClient.tsx
@@ -24,70 +24,68 @@ export const CycleTransferStatsClient: React.FC<
   return (
     <div
       className={cn(
-        "w-full space-y-2 bg-white px-4 py-3 dark:bg-black rounded-lg border bg-card text-card-foreground shadow-lg shadow-neutral-200/40 dark:shadow-none",
+        "w-full bg-white px-4 py-3 dark:bg-black rounded-lg border bg-card text-card-foreground shadow-lg shadow-neutral-200/40 dark:shadow-none space-y-2",
         className,
       )}
     >
-      <div className="space-y-1">
-        <div className="space-y-2">
-          {serverStats.map(({ serverId, serverName, transfer, nextUpdate }) => {
-            const progress = (transfer / max) * 100;
+      {serverStats.map(({ serverId, serverName, transfer, nextUpdate }) => {
+        const progress = (transfer / max) * 100;
 
-            return (
-              <div key={serverId} className="space-y-2">
-                <section className="flex justify-between items-center">
-                  <div className=" bg-green-600 w-fit text-white px-1.5 py-0.5 rounded-full text-[10px]">
-                    {name}
-                  </div>
-                  <span className="text-stone-600 dark:text-stone-400 text-xs">
-                    {new Date(from).toLocaleDateString()} -{" "}
-                    {new Date(to).toLocaleDateString()}
-                  </span>
-                </section>
-                <section className="flex justify-between items-center">
-                  <div className="flex gap-1 items-center">
-                    <CircleStackIcon className="size-3 text-neutral-400 dark:text-neutral-600" />
-                    <span className="text-sm font-semibold">{serverName}</span>
-                  </div>
-                  <div className="flex items-center gap-1">
-                    <p className="text-xs text-end w-10 font-medium">
-                      {progress.toFixed(0)}%
-                    </p>
-                    <AnimatedCircularProgressBar
-                      className="size-4 text-[0px]"
-                      max={100}
-                      min={0}
-                      value={progress}
-                      primaryColor="hsl(var(--chart-5))"
-                    />
-                  </div>
-                </section>
-                <div className="w-full bg-neutral-100 dark:bg-neutral-800 rounded-full overflow-hidden h-2.5">
-                  <div
-                    className="bg-green-600 h-2.5 rounded-full"
-                    style={{ width: `${Math.min(progress, 100)}%` }}
-                  />
-                </div>
+        return (
+          <div key={serverId}>
+            <section className="flex justify-between items-center">
+              <div className="bg-green-600 w-fit text-white px-1.5 py-0.5 rounded-full text-[10px]">
+                {name}
+              </div>
+              <span className="text-stone-600 dark:text-stone-400 text-xs">
+                {new Date(from).toLocaleDateString()} -{" "}
+                {new Date(to).toLocaleDateString()}
+              </span>
+            </section>
+
+            <section className="flex justify-between items-center mt-2">
+              <div className="flex gap-1 items-center">
+                <CircleStackIcon className="size-3 text-neutral-400 dark:text-neutral-600" />
+                <span className="text-sm font-semibold">{serverName}</span>
+              </div>
+              <div className="flex items-center gap-1">
+                <p className="text-xs text-end w-10 font-medium">
+                  {progress.toFixed(0)}%
+                </p>
+                <AnimatedCircularProgressBar
+                  className="size-4 text-[0px]"
+                  max={100}
+                  min={0}
+                  value={progress}
+                  primaryColor="hsl(var(--chart-5))"
+                />
+              </div>
+            </section>
+
+            <div className="w-full bg-neutral-100 dark:bg-neutral-800 rounded-full overflow-hidden h-2.5 mt-2">
+              <div
+                className="bg-green-600 h-2.5 rounded-full"
+                style={{ width: `${Math.min(progress, 100)}%` }}
+              />
+            </div>
 
-                <section className="flex justify-between items-center">
-                  <span className="text-[13px] text-stone-800 dark:text-stone-400 font-medium">
-                    {formatBytes(transfer)} used
-                  </span>
-                  <span className="text-xs text-stone-500 dark:text-stone-400 font-normal">
-                    {formatBytes(max)} total
-                  </span>
-                </section>
+            <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
+              </span>
+              <span className="text-xs text-stone-500 dark:text-stone-400 font-normal">
+                {formatBytes(max)} total
+              </span>
+            </section>
 
-                <section className="flex justify-between items-center">
-                  <div className="text-xs text-stone-500 dark:text-stone-400">
-                    Next update: {new Date(nextUpdate).toLocaleString()}
-                  </div>
-                </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()}
               </div>
-            );
-          })}
-        </div>
-      </div>
+            </section>
+          </div>
+        );
+      })}
     </div>
   );
 };