wood/nezha-dash-v1
1
0
Fork 0
mirror of https://github.com/woodchen-ink/nezha-dash-v1.git synced 2025-07-18 17:41:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: better cycle transfer card

Browse Source
This commit is contained in:
hamster1963 2024-12-02 03:05:48 +08:00
parent 924f7e24bd
commit a3698c2f3c
1 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/CycleTransferStatsClient.tsx
View File

@ -2,6 +2,7 @@ import React from "react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { formatBytes } from "@/lib/format"; import { formatBytes } from "@/lib/format";
import AnimatedCircularProgressBar from "./ui/animated-circular-progress-bar"; import AnimatedCircularProgressBar from "./ui/animated-circular-progress-bar";
import { CircleStackIcon } from "@heroicons/react/24/outline";
interface CycleTransferStatsClientProps { interface CycleTransferStatsClientProps {
name: string; name: string;
@ -35,7 +36,7 @@ export const CycleTransferStatsClient: React.FC<
return ( return (
<div key={serverId} className="space-y-2"> <div key={serverId} className="space-y-2">
<section className="flex justify-between items-center"> <section className="flex justify-between items-center">
<div className=" bg-blue-600 w-fit text-white px-1 py-0.5 rounded text-[10px]"> <div className=" bg-green-600 w-fit text-white px-1.5 py-0.5 rounded-full text-[10px]">
{name} {name}
</div> </div>
<span className="text-stone-600 dark:text-stone-400 text-xs"> <span className="text-stone-600 dark:text-stone-400 text-xs">
@ -44,7 +45,10 @@ export const CycleTransferStatsClient: React.FC<
</span> </span>
</section> </section>
<section className="flex justify-between items-center"> <section className="flex justify-between items-center">
<span className="text-sm font-semibold">{serverName}</span> <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"> <div className="flex items-center gap-1">
<p className="text-xs text-end w-10 font-medium"> <p className="text-xs text-end w-10 font-medium">
{progress.toFixed(0)}% {progress.toFixed(0)}%
@ -54,24 +58,30 @@ export const CycleTransferStatsClient: React.FC<
max={100} max={100}
min={0} min={0}
value={progress} value={progress}
primaryColor="hsl(var(--chart-1))" primaryColor="hsl(var(--chart-5))"
/> />
</div> </div>
</section> </section>
<div className="w-full bg-neutral-200 dark:bg-neutral-800 rounded-full overflow-hidden h-2.5"> <div className="w-full bg-neutral-100 dark:bg-neutral-800 rounded-full overflow-hidden h-2.5">
<div <div
className="bg-blue-600 h-2.5 rounded-full" className="bg-green-600 h-2.5 rounded-full"
style={{ width: `${Math.min(progress, 100)}%` }} style={{ width: `${Math.min(progress, 100)}%` }}
/> />
</div> </div>
<section className="flex justify-between items-center">
<span className="text-[13px] text-stone-800 dark:text-stone-400 font-medium">
{formatBytes(transfer)} used
</span>
<span className="text-xs text-stone-500 dark:text-stone-400 font-normal">
{formatBytes(max)} total
</span>
</section>
<section className="flex justify-between items-center"> <section className="flex justify-between items-center">
<div className="text-xs text-stone-500 dark:text-stone-400"> <div className="text-xs text-stone-500 dark:text-stone-400">
Next update: {new Date(nextUpdate).toLocaleString()} Next update: {new Date(nextUpdate).toLocaleString()}
</div> </div>
<span className="text-xs text-stone-600 dark:text-stone-400 font-semibold">
{formatBytes(transfer)} / {formatBytes(max)}
</span>
</section> </section>
</div> </div>
); );