fix: ServerCard style

hamster1963 · Jul 27, 2024 · f6ad586 · f6ad586
1 parent 38b794f
commit f6ad586
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>