style: hide unknown field

hamster1963 · Dec 4, 2024 · 89adcd9 · 89adcd9
1 parent da3e1c7
commit 89adcd9
Showing 1 changed file with 56 additions and 60 deletions.
diff --git a/app/(main)/ClientComponents/ServerDetailClient.tsx b/app/(main)/ClientComponents/ServerDetailClient.tsx
@@ -120,22 +120,27 @@ export default function ServerDetailClient({
             </section>
           </CardContent>
         </Card>
-        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
-          <CardContent className="px-1.5 py-1">
-            <section className="flex flex-col items-start gap-0.5">
-              <p className="text-xs text-muted-foreground">{t("Version")}</p>
-              <div className="text-xs">{data?.host.Version || "Unknown"} </div>
-            </section>
-          </CardContent>
-        </Card>
-        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
-          <CardContent className="px-1.5 py-1">
-            <section className="flex flex-col items-start gap-0.5">
-              <p className="text-xs text-muted-foreground">{t("Arch")}</p>
-              <div className="text-xs">{data?.host.Arch || "Unknown"} </div>
-            </section>
-          </CardContent>
-        </Card>
+        {data?.host.Version && (
+          <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+            <CardContent className="px-1.5 py-1">
+              <section className="flex flex-col items-start gap-0.5">
+                <p className="text-xs text-muted-foreground">{t("Version")}</p>
+                <div className="text-xs">{data?.host.Version} </div>
+              </section>
+            </CardContent>
+          </Card>
+        )}
+        {data?.host.Arch && (
+          <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+            <CardContent className="px-1.5 py-1">
+              <section className="flex flex-col items-start gap-0.5">
+                <p className="text-xs text-muted-foreground">{t("Arch")}</p>
+                <div className="text-xs">{data?.host.Arch} </div>
+              </section>
+            </CardContent>
+          </Card>
+        )}
+
         <Card className="rounded-[10px] bg-transparent border-none shadow-none">
           <CardContent className="px-1.5 py-1">
             <section className="flex flex-col items-start gap-0.5">
@@ -170,61 +175,52 @@ export default function ServerDetailClient({
         </Card>
       </section>
       <section className="flex flex-wrap gap-2 mt-1">
-        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
-          <CardContent className="px-1.5 py-1">
-            <section className="flex flex-col items-start gap-0.5">
-              <p className="text-xs text-muted-foreground">{t("System")}</p>
-              {data?.host.Platform ? (
+        {data?.host.Platform && (
+          <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+            <CardContent className="px-1.5 py-1">
+              <section className="flex flex-col items-start gap-0.5">
+                <p className="text-xs text-muted-foreground">{t("System")}</p>
+
                 <div className="text-xs">
                   {" "}
-                  {data?.host.Platform || "Unknown"} -{" "}
-                  {data?.host.PlatformVersion}{" "}
+                  {data?.host.Platform} - {data?.host.PlatformVersion}{" "}
                 </div>
-              ) : (
-                <div className="text-xs">Unknown</div>
-              )}
-            </section>
-          </CardContent>
-        </Card>
-        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
-          <CardContent className="px-1.5 py-1">
-            <section className="flex flex-col items-start gap-0.5">
-              <p className="text-xs text-muted-foreground">{t("CPU")}</p>
-              {data?.host.CPU ? (
+              </section>
+            </CardContent>
+          </Card>
+        )}
+        {data?.host.CPU && (
+          <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+            <CardContent className="px-1.5 py-1">
+              <section className="flex flex-col items-start gap-0.5">
+                <p className="text-xs text-muted-foreground">{t("CPU")}</p>
+
                 <div className="text-xs"> {data?.host.CPU.join(", ")}</div>
-              ) : (
-                <div className="text-xs">Unknown</div>
-              )}
-            </section>
-          </CardContent>
-        </Card>
-        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
-          <CardContent className="px-1.5 py-1">
-            <section className="flex flex-col items-start gap-0.5">
-              <p className="text-xs text-muted-foreground">{"GPU"}</p>
-              {data?.host.GPU ? (
+              </section>
+            </CardContent>
+          </Card>
+        )}
+        {data?.host.GPU && (
+          <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+            <CardContent className="px-1.5 py-1">
+              <section className="flex flex-col items-start gap-0.5">
+                <p className="text-xs text-muted-foreground">{"GPU"}</p>
                 <div className="text-xs"> {data?.host.GPU.join(", ")}</div>
-              ) : (
-                <div className="text-xs">Unknown</div>
-              )}
-            </section>
-          </CardContent>
-        </Card>
+              </section>
+            </CardContent>
+          </Card>
+        )}
       </section>
       <section className="flex flex-wrap gap-2 mt-1">
         <Card className="rounded-[10px] bg-transparent border-none shadow-none">
           <CardContent className="px-1.5 py-1">
             <section className="flex flex-col items-start gap-0.5">
               <p className="text-xs text-muted-foreground">{t("Load")}</p>
-              {data.status.NetInTransfer ? (
-                <div className="text-xs">
-                  {data.status.Load1.toFixed(2)} /{" "}
-                  {data.status.Load5.toFixed(2)} /{" "}
-                  {data.status.Load15.toFixed(2)}
-                </div>
-              ) : (
-                <div className="text-xs">Unknown</div>
-              )}
+              <div className="text-xs">
+                {data.status.Load1.toFixed(2) || "0.00"} /{" "}
+                {data.status.Load5.toFixed(2) || "0.00"} /{" "}
+                {data.status.Load15.toFixed(2) || "0.00"}
+              </div>
             </section>
           </CardContent>
         </Card>