jackmechem/server-dash
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Initial ui

Browse source
This commit is contained in:
Jack Mechem 2026-03-25 23:33:09 -07:00
parent 526822335e
commit 4bfb87448f
18 changed files with 702 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

47
app/components/NetworkCard.tsx Normal file
View file

@ -0,0 +1,47 @@
import { formatBytes } from "../lib/utils";
interface NetworkCardProps {
iface: string | null;
speed: { rx: number; tx: number } | null;
delay?: number;
}
export default function NetworkCard({ iface, speed, delay = 0 }: NetworkCardProps) {
return (
<div
className="bg-white border border-gray-200 rounded-2xl p-6 shadow-sm animate-fade-up"
style={{ animationDelay: `${delay}ms` }}
>
<p className="text-[0.68rem] font-medium tracking-widest uppercase text-gray-400 mb-4">
Network
</p>
{iface && speed ? (
<>
<p className="text-[0.68rem] font-medium tracking-widest uppercase text-gray-400 mb-3">
{iface}
</p>
<div className="flex gap-6">
<div className="flex flex-col gap-0.5">
<span className="text-lg font-medium text-blue-500">
↓ {formatBytes(speed.rx)}/s
</span>
<span className="text-[0.62rem] uppercase tracking-widest text-gray-400">
Download
</span>
</div>
<div className="flex flex-col gap-0.5">
<span className="text-lg font-medium text-violet-500">
↑ {formatBytes(speed.tx)}/s
</span>
<span className="text-[0.62rem] uppercase tracking-widest text-gray-400">
Upload
</span>
</div>
</div>
</>
) : (
<div className="skeleton h-11" />
)}
</div>
);
}