From f6ad5868f0918f17869c53035f7a9debe2aa6bc9 Mon Sep 17 00:00:00 2001
From: kuusei <motaro@kuusei.moe>
Date: Sat, 27 Jul 2024 13:26:42 +0800
Subject: [PATCH] fix: ServerCard style

---
 .gitignore                                    |  2 +-
 .../ClientComponents/ServerListClient.tsx     |  3 ++-
 .../ClientComponents/ServerOverviewClient.tsx |  3 ++-
 components/ServerCard.tsx                     | 25 +++++++++++++------
 4 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/.gitignore b/.gitignore
index c8ea49c..2cf5939 100644
--- a/.gitignore
+++ b/.gitignore
@@ -38,7 +38,7 @@ next-env.d.ts
 # pwa
 /public/sw.js
 /public/sw.js.map
-/public/swe-worker-development.js
+/public/swe-worker-*.js
 /public/workbox*.js
 /public/workbox*.js.map
 
diff --git a/app/(main)/ClientComponents/ServerListClient.tsx b/app/(main)/ClientComponents/ServerListClient.tsx
index 494aac6..a38ab4d 100644
--- a/app/(main)/ClientComponents/ServerListClient.tsx
+++ b/app/(main)/ClientComponents/ServerListClient.tsx
@@ -1,11 +1,12 @@
 "use client";
 
+import { ServerApi } from "@/app/types/nezha-api";
 import ServerCard from "@/components/ServerCard";
 import { nezhaFetcher } from "@/lib/utils";
 import useSWR from "swr";
 
 export default function ServerListClient() {
-  const { data } = useSWR('/api/server', nezhaFetcher, {
+  const { data } = useSWR<ServerApi>('/api/server', nezhaFetcher, {
     refreshInterval: 3000,
   });
   if (!data) return null;
diff --git a/app/(main)/ClientComponents/ServerOverviewClient.tsx b/app/(main)/ClientComponents/ServerOverviewClient.tsx
index 6d2b2ea..8ec1b76 100644
--- a/app/(main)/ClientComponents/ServerOverviewClient.tsx
+++ b/app/(main)/ClientComponents/ServerOverviewClient.tsx
@@ -6,9 +6,10 @@ import Image from "next/image";
 import useSWR from "swr";
 import { formatBytes, nezhaFetcher } from "@/lib/utils";
 import { Loader } from "@/components/loading/Loader";
+import { ServerApi } from "@/app/types/nezha-api";
 
 export default function ServerOverviewClient() {
-    const { data } = useSWR('/api/server', nezhaFetcher, {
+    const { data } = useSWR<ServerApi>('/api/server', nezhaFetcher, {
         refreshInterval: 30000
     });
 
diff --git a/components/ServerCard.tsx b/components/ServerCard.tsx
index c9757b6..405b994 100644
--- a/components/ServerCard.tsx
+++ b/components/ServerCard.tsx
@@ -34,18 +34,25 @@ export default function ServerCard({
   return status === "online" ? (
     <Card
       className={
-        "flex flex-col items-center justify-center gap-3 p-3 md:px-5 lg:flex-row"
+        "flex flex-col items-center justify-start gap-3 p-3 md:px-5 lg:flex-row"
       }
     >
       <TooltipProvider delayDuration={0}>
         <Tooltip>
           <TooltipTrigger asChild>
-            <section className={"flex w-28 items-center justify-center gap-2"}>
-              <p className="text-sm font-bold tracking-tight">{name}</p>
-              <span className="h-2 w-2 rounded-full bg-green-500"></span>
+            <section className={"flex lg:w-28 items-center justify-start gap-2"}>
+              <span className="h-2 w-2 shrink-0 rounded-full bg-green-500"></span>
+              <p className="shrink truncate text-sm font-bold tracking-tight">
+                {name}
+              </p>
             </section>
           </TooltipTrigger>
-          <TooltipContent>Online: {uptime.toFixed(0)} Days</TooltipContent>
+          <TooltipContent>
+            <section>
+              <div>Hostname: {name}</div>
+              <div>Online: {uptime.toFixed(0)} Days</div>
+            </section>
+          </TooltipContent>
         </Tooltip>
       </TooltipProvider>
       <section className={"grid grid-cols-5 items-center gap-3"}>
@@ -76,14 +83,16 @@ export default function ServerCard({
     </Card>
   ) : (
     <Card
-      className={"flex flex-col h-[61px] items-center gap-3 p-3 md:px-6 lg:flex-row"}
+      className={
+        "flex flex-col items-center justify-start gap-3 p-3 md:px-5 lg:flex-row"
+      }
     >
       <TooltipProvider delayDuration={0}>
         <Tooltip>
           <TooltipTrigger asChild>
-            <section className={"flex w-28 items-center justify-center gap-2"}>
+            <section className={"flex lg:w-28 items-center justify-start gap-2"}>
+              <span className="h-2 w-2 shrink-0 rounded-full bg-red-500"></span>
               <p className="text-sm font-bold tracking-tight">{name}</p>
-              <span className="h-2 w-2 rounded-full bg-red-500"></span>
             </section>
           </TooltipTrigger>
           <TooltipContent>Offline</TooltipContent>