dashboard servers

src/app/dashboard/server.tsx

@@ -0,0 +1,75 @@
+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>
+  );
+}