fix: ServerCard style

This commit is contained in:
kuusei 2024-07-27 13:26:42 +08:00
parent 38b794fc4f
commit f6ad5868f0
No known key found for this signature in database
4 changed files with 22 additions and 11 deletions

2
.gitignore vendored
View File

@ -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

View File

@ -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;

View File

@ -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
});

View File

@ -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>