root/nezha_dash
1
0
Fork 0
mirror of https://github.com/hamster1963/nezha-dash.git synced 2025-04-24 21:10:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: ServerCard style

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -38,7 +38,7 @@ next-env.d.ts
# pwa # pwa
/public/sw.js /public/sw.js
/public/sw.js.map /public/sw.js.map
/public/swe-worker-development.js /public/swe-worker-*.js
/public/workbox*.js /public/workbox*.js
/public/workbox*.js.map /public/workbox*.js.map

3
app/(main)/ClientComponents/ServerListClient.tsx
View File

@ -1,11 +1,12 @@
"use client"; "use client";
import { ServerApi } from "@/app/types/nezha-api";
import ServerCard from "@/components/ServerCard"; import ServerCard from "@/components/ServerCard";
import { nezhaFetcher } from "@/lib/utils"; import { nezhaFetcher } from "@/lib/utils";
import useSWR from "swr"; import useSWR from "swr";
export default function ServerListClient() { export default function ServerListClient() {
const { data } = useSWR('/api/server', nezhaFetcher, { const { data } = useSWR<ServerApi>('/api/server', nezhaFetcher, {
refreshInterval: 3000, refreshInterval: 3000,
}); });
if (!data) return null; if (!data) return null;

3
app/(main)/ClientComponents/ServerOverviewClient.tsx
View File

@ -6,9 +6,10 @@ import Image from "next/image";
import useSWR from "swr"; import useSWR from "swr";
import { formatBytes, nezhaFetcher } from "@/lib/utils"; import { formatBytes, nezhaFetcher } from "@/lib/utils";
import { Loader } from "@/components/loading/Loader"; import { Loader } from "@/components/loading/Loader";
import { ServerApi } from "@/app/types/nezha-api";
export default function ServerOverviewClient() { export default function ServerOverviewClient() {
const { data } = useSWR('/api/server', nezhaFetcher, { const { data } = useSWR<ServerApi>('/api/server', nezhaFetcher, {
refreshInterval: 30000 refreshInterval: 30000
}); });

25
components/ServerCard.tsx
View File

@ -34,18 +34,25 @@ export default function ServerCard({
return status === "online" ? ( return status === "online" ? (
<Card <Card
className={ 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}> <TooltipProvider delayDuration={0}>
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <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"}>
<p className="text-sm font-bold tracking-tight">{name}</p> <span className="h-2 w-2 shrink-0 rounded-full bg-green-500"></span>
<span className="h-2 w-2 rounded-full bg-green-500"></span> <p className="shrink truncate text-sm font-bold tracking-tight">
{name}
</p>
</section> </section>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent>Online: {uptime.toFixed(0)} Days</TooltipContent> <TooltipContent>
<section>
<div>Hostname: {name}</div>
<div>Online: {uptime.toFixed(0)} Days</div>
</section>
</TooltipContent>
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>
<section className={"grid grid-cols-5 items-center gap-3"}> <section className={"grid grid-cols-5 items-center gap-3"}>
@ -76,14 +83,16 @@ export default function ServerCard({
</Card> </Card>
) : ( ) : (
<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}> <TooltipProvider delayDuration={0}>
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <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> <p className="text-sm font-bold tracking-tight">{name}</p>
<span className="h-2 w-2 rounded-full bg-red-500"></span>
</section> </section>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent>Offline</TooltipContent> <TooltipContent>Offline</TooltipContent>