Buriburizaemon/nezha-dash-v1
1
0
Fork 0
mirror of https://github.com/Buriburizaem0n/nezha-dash-v1.git synced 2026-02-04 12:40:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: server page

Browse Source
This commit is contained in:
hamster1963
2024-11-23 19:28:55 +08:00
parent d1558b71c4
commit 963b6a54a6
21 changed files with 784 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
src/components/ServerOverview.tsx Normal file
View File

@@ -0,0 +1,110 @@
import { Card, CardContent } from "@/components/ui/card";
import { cn, formatBytes } from "@/lib/utils";
type ServerOverviewProps = {
online: number;
offline: number;
total: number;
up: number;
down: number;
}
export default function ServerOverview({ online, offline, total, up, down }: ServerOverviewProps) {
return (
<>
<section className="grid grid-cols-2 gap-4 lg:grid-cols-4">
<Card
className={cn("hover:border-blue-500 transition-all")}
>
<CardContent className="px-6 py-3">
<section className="flex flex-col gap-1">
<p className="text-sm font-medium md:text-base">
{"Totalservers"}
</p>
<div className="flex items-center gap-2">
<span className="relative flex h-2 w-2">
<span className="relative inline-flex h-2 w-2 rounded-full bg-blue-500"></span>
</span>
<div className="text-lg font-semibold">
{total}
</div>
</div>
</section>
</CardContent>
</Card>
<Card
className={cn(
" hover:ring-green-500 ring-1 ring-transparent transition-all",
)}
>
<CardContent className="px-6 py-3">
<section className="flex flex-col gap-1">
<p className="text-sm font-medium md:text-base">
{"Onlineservers"}
</p>
<div className="flex items-center gap-2">
<span className="relative flex h-2 w-2">
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-500 opacity-75"></span>
<span className="relative inline-flex h-2 w-2 rounded-full bg-green-500"></span>
</span>
<div className="text-lg font-semibold">
{online}
</div>
</div>
</section>
</CardContent>
</Card>
<Card
className={cn(
" hover:ring-red-500 ring-1 ring-transparent transition-all",
)}
>
<CardContent className="px-6 py-3">
<section className="flex flex-col gap-1">
<p className="text-sm font-medium md:text-base">
{"Offlineservers"}
</p>
<div className="flex items-center gap-2">
<span className="relative flex h-2 w-2">
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-red-500 opacity-75"></span>
<span className="relative inline-flex h-2 w-2 rounded-full bg-red-500"></span>
</span>
<div className="text-lg font-semibold">
{offline}
</div>
</div>
</section>
</CardContent>
</Card>
<Card
className={cn(
" hover:ring-purple-500 ring-1 ring-transparent transition-all",
)}
>
<CardContent className="relative px-6 py-3">
<section className="flex flex-col gap-1">
<p className="text-sm font-medium md:text-base">
{"Totalbandwidth"}
</p>
<section className="flex flex-col sm:flex-row pt-[8px] sm:items-center items-start gap-1">
<p className="text-[12px] text-nowrap font-semibold">
↑{formatBytes(up)}
</p>
<p className="text-[12px] text-nowrap font-semibold">
↓{formatBytes(down)}
</p>
</section>
</section>
</CardContent>
</Card>
</section>
</>
);
}