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

feat: live speed

Browse Source
This commit is contained in:
hamster1963
2024-12-03 15:44:46 +08:00
parent b84be53ab8
commit 420c1d9007
5 changed files with 57 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/ServerOverview.tsx
View File

@@ -2,6 +2,7 @@ import { Card, CardContent } from "@/components/ui/card";
import { cn } from "@/lib/utils";
import { useTranslation } from "react-i18next";
import { formatBytes } from "@/lib/format";
import { Separator } from "./ui/separator";
type ServerOverviewProps = {
online: number;
@@ -9,6 +10,8 @@ type ServerOverviewProps = {
total: number;
up: number;
down: number;
upSpeed: number;
downSpeed: number;
};
export default function ServerOverview({
@@ -17,6 +20,8 @@ export default function ServerOverview({
total,
up,
down,
upSpeed,
downSpeed,
}: ServerOverviewProps) {
const { t } = useTranslation();
@@ -24,7 +29,7 @@ export default function ServerOverview({
<>
<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">
<CardContent className="flex h-full items-center px-6 py-3">
<section className="flex flex-col gap-1">
<p className="text-sm font-medium md:text-base">
{t("serverOverview.totalServers")}
@@ -43,7 +48,7 @@ export default function ServerOverview({
" hover:ring-green-500 ring-1 ring-transparent transition-all",
)}
>
<CardContent className="px-6 py-3">
<CardContent className="flex h-full items-center px-6 py-3">
<section className="flex flex-col gap-1">
<p className="text-sm font-medium md:text-base">
{t("serverOverview.onlineServers")}
@@ -64,7 +69,7 @@ export default function ServerOverview({
" hover:ring-red-500 ring-1 ring-transparent transition-all",
)}
>
<CardContent className="px-6 py-3">
<CardContent className="flex h-full items-center px-6 py-3">
<section className="flex flex-col gap-1">
<p className="text-sm font-medium md:text-base">
{t("serverOverview.offlineServers")}
@@ -84,20 +89,36 @@ export default function ServerOverview({
" hover:ring-purple-500 ring-1 ring-transparent transition-all",
)}
>
<CardContent className="relative px-6 py-3">
<CardContent className="flex h-full items-center relative px-6 py-3">
<section className="flex flex-col gap-1">
<p className="text-sm font-medium md:text-base">
{t("serverOverview.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">
<div className="flex items-center gap-1">
<p className="text-sm font-medium md:text-base">
{t("serverOverview.totalBandwidth")}
</p>
<Separator
orientation="vertical"
className="h-4 w-[1px]"
/>
<p className="text-sm font-medium md:text-base">
{t("serverOverview.speed")}
</p>
</div>
<section className="flex flex-row sm:items-center items-start gap-1">
<p className="sm:text-[12px] text-[10px] text-nowrap font-semibold">
↑{formatBytes(up)}
</p>
<p className="text-[12px] text-nowrap font-semibold">
<p className="sm:text-[12px] text-[10px] text-nowrap font-semibold">
↓{formatBytes(down)}
</p>
</section>
<section className="flex flex-row sm:items-center items-start gap-1">
<p className="sm:text-[12px] text-[10px] text-nowrap font-semibold">
↑{formatBytes(upSpeed)}/s
</p>
<p className="sm:text-[12px] text-[10px] text-nowrap font-semibold">
↓{formatBytes(downSpeed)}/s
</p>
</section>
</section>
</CardContent>
</Card>