From a3d578a3974eb3d3ed95562a3bd7b3e767da7882 Mon Sep 17 00:00:00 2001
From: Kieran <kieran@harkin.me>
Date: Thu, 22 Aug 2024 13:50:52 +0300
Subject: [PATCH] UI tweaks

---
 index.html                    | 12 +++++++++++-
 src/App.tsx                   |  3 +++
 src/api.ts                    |  1 +
 src/components/bytes.tsx      | 19 +++++++++++++++++++
 src/components/pay-button.tsx |  6 ++++++
 src/components/vps-card.tsx   |  7 ++++---
 src/const.ts                  |  9 ++++++++-
 7 files changed, 52 insertions(+), 5 deletions(-)
 create mode 100644 src/components/bytes.tsx

diff --git a/index.html b/index.html
index 7e9549d..11ae7e9 100644
--- a/index.html
+++ b/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"
diff --git a/src/App.tsx b/src/App.tsx
index 01c25d7..e2cb0e9 100644
--- a/src/App.tsx
+++ b/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: {
diff --git a/src/api.ts b/src/api.ts
index bd588f1..0f50304 100644
--- a/src/api.ts
+++ b/src/api.ts
@@ -1,5 +1,6 @@
 export interface MachineSpec {
   id: string;
+  active: boolean;
   cpu: number;
   ram: number;
   disk: {
diff --git a/src/components/bytes.tsx b/src/components/bytes.tsx
new file mode 100644
index 0000000..0d91850
--- /dev/null
+++ b/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";
+    }
+}
\ No newline at end of file
diff --git a/src/components/pay-button.tsx b/src/components/pay-button.tsx
index 14ad42e..a2669da 100644
--- a/src/components/pay-button.tsx
+++ 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" />
diff --git a/src/components/vps-card.tsx b/src/components/vps-card.tsx
index d34884a..7c8026a 100644
--- a/src/components/vps-card.tsx
+++ b/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} />
diff --git a/src/const.ts b/src/const.ts
index 8600cbe..fa6e911 100644
--- a/src/const.ts
+++ b/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;
\ No newline at end of file
+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;
\ No newline at end of file