76 lines
1.9 KiB
TypeScript
76 lines
1.9 KiB
TypeScript
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Progress } from "@/components/ui/progress";
|
|
import Server from "@/types/server";
|
|
import { Cpu, HardDrive, MemoryStick, Network, Wifi } from "lucide-react";
|
|
|
|
function UsageBar({
|
|
value,
|
|
Icon,
|
|
text,
|
|
color,
|
|
}: {
|
|
value: number;
|
|
Icon: React.ElementType;
|
|
text: string;
|
|
color: string;
|
|
}) {
|
|
return (
|
|
<div className="flex flex-col gap-2 w-full">
|
|
<div className="justify-between flex">
|
|
<Label className="text-md flex justify-center">
|
|
<Icon size={16} color={color} /> {text}
|
|
</Label>
|
|
<Label className="text-md">{value}%</Label>
|
|
</div>
|
|
<Progress value={value} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function ServerComponent({ server }: { server: Server }) {
|
|
return (
|
|
<Card className="w-full transition-transform duration-500 hover:scale-102 hover:cursor-pointer">
|
|
<CardHeader>
|
|
<CardTitle>{server.name}</CardTitle>
|
|
<CardDescription>
|
|
{server.status[0].toUpperCase() + server.status.slice(1)} {" · "}
|
|
{server.ip}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="w-full flex flex-col gap-3.5">
|
|
<UsageBar
|
|
value={server.cpu}
|
|
Icon={Cpu}
|
|
text="CPU"
|
|
color="var(--chart-2)"
|
|
/>
|
|
<UsageBar
|
|
value={server.memory}
|
|
Icon={MemoryStick}
|
|
text="Memory"
|
|
color="var(--chart-1)"
|
|
/>
|
|
<UsageBar
|
|
value={server.storage}
|
|
Icon={HardDrive}
|
|
text="Storage"
|
|
color="var(--chart-5)"
|
|
/>
|
|
<UsageBar
|
|
value={server.network}
|
|
Icon={Network}
|
|
text="Network"
|
|
color="var(--chart-3)"
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|