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

refactor: improve CycleTransferStats and ServiceTracker UI components

Browse Source
This commit is contained in:
hamster1963
2025-02-01 19:39:23 +08:00
parent 0f81ef2f25
commit 48dbf85bca
4 changed files with 47 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/CycleTransferStatsClient.tsx
+33 -38
View File
@@ -1,11 +1,8 @@
import { formatBytes } from "@/lib/format"
import { cn } from "@/lib/utils"
import { CircleStackIcon } from "@heroicons/react/24/outline"
import React from "react"
import { useTranslation } from "react-i18next"
import AnimatedCircularProgressBar from "./ui/animated-circular-progress-bar"
interface CycleTransferStatsClientProps {
name: string
from: string
@@ -26,7 +23,7 @@ export const CycleTransferStatsClient: React.FC<CycleTransferStatsClientProps> =
return (
<div
className={cn(
"w-full bg-white px-4 py-3 rounded-lg border bg-card text-card-foreground shadow-lg shadow-neutral-200/40 dark:shadow-none space-y-2",
"w-full bg-white px-4 py-3.5 rounded-lg border bg-card text-card-foreground hover:shadow-sm transition-all duration-200 dark:shadow-none",
className,
{
"bg-card/70": customBackgroundImage,
@@ -37,43 +34,41 @@ export const CycleTransferStatsClient: React.FC<CycleTransferStatsClientProps> =
const progress = (transfer / max) * 100
return (
<div key={serverId}>
<section className="flex justify-between items-center">
<div className="bg-green-600 w-fit text-white px-1.5 py-0.5 rounded-full text-[10px]">{name}</div>
<span className="text-stone-600 dark:text-stone-400 text-xs">
{new Date(from).toLocaleDateString()} - {new Date(to).toLocaleDateString()}
</span>
</section>
<section className="flex justify-between items-center mt-2">
<div className="flex gap-1 items-center">
<CircleStackIcon className="size-3 text-neutral-400 dark:text-neutral-600" />
<span className="text-sm font-semibold">{serverName}</span>
</div>
<div className="flex items-center gap-1">
<p className="text-xs text-end w-10 font-medium">{progress.toFixed(0)}%</p>
<AnimatedCircularProgressBar className="size-4 text-[0px]" max={100} min={0} value={progress} primaryColor="hsl(var(--chart-5))" />
</div>
</section>
<div className="w-full bg-neutral-100 dark:bg-neutral-800 rounded-full overflow-hidden h-2.5 mt-2">
<div className="bg-green-600 h-2.5 rounded-full" style={{ width: `${Math.min(progress, 100)}%` }} />
<div key={serverId} className="space-y-3">
{/* Header */}
<div className="flex items-center justify-between">
<span className="text-sm font-medium text-neutral-800 dark:text-neutral-200">{serverName}</span>
<div className="bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 px-2 py-0.5 rounded text-xs font-medium">{name}</div>
</div>
<section className="flex justify-between items-center mt-2">
<span className="text-[13px] text-stone-800 dark:text-stone-400 font-medium">
{formatBytes(transfer)} {t("cycleTransfer.used")}
</span>
<span className="text-xs text-stone-500 dark:text-stone-400 font-normal">
{formatBytes(max)} {t("cycleTransfer.total")}
</span>
</section>
<section className="flex justify-between items-center mt-2">
<div className="text-xs text-stone-500 dark:text-stone-400">
{t("cycleTransfer.nextUpdate")}: {new Date(nextUpdate).toLocaleString()}
{/* Progress Section */}
<div className="space-y-1.5">
<div className="flex items-center justify-between">
<div className="flex items-baseline gap-1">
<span className="text-sm font-medium text-neutral-800 dark:text-neutral-200">{formatBytes(transfer)}</span>
<span className="text-xs text-neutral-500 dark:text-neutral-400">/ {formatBytes(max)}</span>
</div>
<span className="text-xs font-medium text-neutral-600 dark:text-neutral-300">{progress.toFixed(1)}%</span>
</div>
</section>
<div className="relative h-1.5">
<div className="absolute inset-0 bg-neutral-100 dark:bg-neutral-800 rounded-full" />
<div
className="absolute inset-0 bg-emerald-500 rounded-full transition-all duration-300"
style={{ width: `${Math.min(progress, 100)}%` }}
/>
</div>
</div>
{/* Footer */}
<div className="flex items-center justify-between text-[11px] text-neutral-500 dark:text-neutral-400">
<span>
{new Date(from).toLocaleDateString()} - {new Date(to).toLocaleDateString()}
</span>
<span>
{t("cycleTransfer.nextUpdate")}: {new Date(nextUpdate).toLocaleString()}
</span>
</div>
</div>
)
})}