UI tweaks

src/components/bytes.tsx

@@ -0,0 +1,19 @@
+import { GiB, KiB, MiB, TiB } from "../const"
+
+interface BytesSizeProps {
+    value: number,
+    precision?: number
+}
+export default function BytesSize(props: BytesSizeProps) {
+    if (props.value >= TiB) {
+        return (props.value / TiB).toFixed(props.precision ?? 0) + "TB";
+    } else if (props.value >= GiB) {
+        return (props.value / GiB).toFixed(props.precision ?? 0) + "GB";
+    } else if (props.value >= MiB) {
+        return (props.value / MiB).toFixed(props.precision ?? 0) + "MB";
+    } else if (props.value >= KiB) {
+        return (props.value / KiB).toFixed(props.precision ?? 0) + "KB";
+    } else {
+        return (props.value).toFixed(props.precision ?? 0) + "B";
+    }
+}

src/components/pay-button.tsx

@@ -26,6 +26,12 @@ export default function VpsPayButton({ spec }: { spec: MachineSpec }) {
         xhttp.send(new FormData(form));
     }
 
+    if (!spec.active) {
+        return <div className="text-center text-xl uppercase bg-red-800 rounded-xl py-3 font-bold">
+            Unavailable
+        </div>
+    }
+
     return <form method="POST" action={serverUrl} className="btcpay-form btcpay-form--block" onSubmit={handleFormSubmit}>
         <input type="hidden" name="storeId" value="CdaHy1puLx4kLC9BG3A9mu88XNyLJukMJRuuhAfbDrxg" />
         <input type="hidden" name="jsonResponse" value="true" />

src/components/vps-card.tsx

@@ -1,14 +1,15 @@
 import { DiskType, MachineSpec } from "../api";
+import BytesSize from "./bytes";
 import CostLabel from "./cost";
 import VpsPayButton from "./pay-button";
 
 export default function VpsCard({ spec }: { spec: MachineSpec }) {
-    return <div className="rounded-xl border border-netrual-500 px-2 py-3">
+    return <div className="rounded-xl border border-neutral-600 px-3 py-2">
         <h2>{spec.id}</h2>
         <ul>
             <li>CPU: {spec.cpu}vCPU</li>
-            <li>RAM: {spec.ram / 1024 / 1024 / 1024}GB</li>
-            <li>{spec.disk.type === DiskType.SSD ? "SSD" : "HDD"}: {spec.disk.size / 1024 / 1024 / 1024}GB</li>
+            <li>RAM: <BytesSize value={spec.ram} /></li>
+            <li>{spec.disk.type === DiskType.SSD ? "SSD" : "HDD"}: <BytesSize value={spec.disk.size} /></li>
         </ul>
         <h2><CostLabel cost={spec.cost} /></h2>
         <VpsPayButton spec={spec} />