feat: backend api

src/components/vps-resources.tsx

@@ -0,0 +1,31 @@
+import { VmInstance, VmTemplate } from "../api";
+import BytesSize from "./bytes";
+
+export default function VpsResources({ vm }: { vm: VmInstance | VmTemplate }) {
+  const diskType = "template_id" in vm ? vm.template?.disk_type : vm.disk_type;
+  const region =
+    "region_id" in vm ? vm.region?.name : vm.template?.region?.name;
+  const status = "status" in vm ? vm.status : undefined;
+  return (
+    <>
+      <div className="text-xs text-neutral-400">
+        {vm.cpu} vCPU, <BytesSize value={vm.memory} /> RAM,{" "}
+        <BytesSize value={vm.disk_size} /> {diskType?.toUpperCase()},{" "}
+        {region && <>Location: {region}</>}
+      </div>
+      {status && status.state === "running" && (
+        <div className="text-sm text-neutral-200">
+          <div className="w-2 h-2 rounded-full bg-green-800 inline-block"></div>{" "}
+          {(100 * status.cpu_usage).toFixed(1)}% CPU,{" "}
+          {(100 * status.mem_usage).toFixed(0)}% RAM
+        </div>
+      )}
+      {status && status.state === "stopped" && (
+        <div className="text-sm text-neutral-200">
+          <div className="w-2 h-2 rounded-full bg-red-800 inline-block"></div>{" "}
+          Stopped
+        </div>
+      )}
+    </>
+  );
+}