UI tweaks

index.html

@@ -5,7 +5,17 @@
   <meta charset="UTF-8" />
   <link rel="icon" type="image/svg+xml" href="/vite.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>lnvps.com</title>
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Bitcoin Lightning VPS provider" />
+  <meta
+    name="keywords"
+    content="bitcoin lightning fast cheap vps virtual private server hosting web" />
+  <meta property="og:url" content="https://lnvps.net" />
+  <meta property="og:type" content="website" />
+  <meta property="og:title" content="LNVPS" />
+  <meta property="og:description" content="Bitcoin Lightning VPS provider" />
+  <meta property="og:image" content="/logo.png" />
+  <title>LNVPS</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap"

src/App.tsx

@@ -6,6 +6,7 @@ export default function App() {
   const offers: Array<MachineSpec> = [
     {
       id: "2x2x80",
+      active: true,
       cpu: 2,
       ram: 2 * GiB,
       disk: {
@@ -20,6 +21,7 @@ export default function App() {
     },
     {
       id: "4x4x160",
+      active: true,
       cpu: 4,
       ram: 4 * GiB,
       disk: {
@@ -34,6 +36,7 @@ export default function App() {
     },
     {
       id: "8x8x400",
+      active: true,
       cpu: 8,
       ram: 8 * GiB,
       disk: {

src/api.ts

@@ -1,5 +1,6 @@
 export interface MachineSpec {
   id: string;
+  active: boolean;
   cpu: number;
   ram: number;
   disk: {

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>RAM: <BytesSize value={spec.ram} /></li>
-            <li>{spec.disk.type === DiskType.SSD ? "SSD" : "HDD"}: {spec.disk.size / 1024 / 1024 / 1024}GB</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} />

src/const.ts

@@ -1,4 +1,11 @@
 export const KiB = 1024;
 export const MiB = KiB * 1024;
 export const GiB = MiB * 1024;
-export const TiB = GiB * 1024;
+export const TiB = GiB * 1024;
+export const PiB = TiB * 1024;
+
+export const KB = 1000;
+export const MB = KB * 1000;
+export const GB = KB * 1000;
+export const TB = GB * 1000;
+export const PB = TB * 1000;