From 935849d1697f23745b004362de3a9d311fb06473 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@jamesritchie.co.uk>
Date: Fri, 24 Nov 2023 17:23:42 +0000
Subject: [PATCH] Pricing calculator has better slider logic

---
 .../components/billing/PricingCalculator.tsx   | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/apps/webapp/app/components/billing/PricingCalculator.tsx b/apps/webapp/app/components/billing/PricingCalculator.tsx
index 932dfe495..ce2e18d54 100644
--- a/apps/webapp/app/components/billing/PricingCalculator.tsx
+++ b/apps/webapp/app/components/billing/PricingCalculator.tsx
@@ -14,18 +14,12 @@ export function PricingCalculator() {
 }
 
 const concurrentRuns = [
-  { 5: "Up to 5" },
-  { 20: "Up to 20" },
-  { 50: "Up to 50" },
-  { 100: "Up to 100" },
+  { value: 5, label: "Up to 5" },
+  { value: 20, label: "Up to 20" },
+  { value: 50, label: "Up to 50" },
+  { value: 100, label: "Up to 100" },
 ];
 
-const lastItemConcurrentRuns = concurrentRuns[concurrentRuns.length - 1];
-const maxItemsConcurrentRuns = Number(Object.keys(lastItemConcurrentRuns)[0]);
-const stepConcurrentRuns = maxItemsConcurrentRuns / concurrentRuns.length;
-
-console.log(maxItemsConcurrentRuns, stepConcurrentRuns);
-
 function ConcurrentRunsSlider() {
   return (
     <form>
@@ -45,8 +39,8 @@ function ConcurrentRunsSlider() {
           <Slider.Root
             className="relative mb-2 mt-4 flex h-5 w-full touch-none select-none items-center"
             defaultValue={[0]}
-            max={maxItemsConcurrentRuns}
-            step={stepConcurrentRuns}
+            max={concurrentRuns.length - 1}
+            step={1}
           >
             <Slider.Track className="relative h-[8px] grow rounded-full bg-slate-850">
               <Slider.Range className="absolute h-full rounded-full bg-indigo-500" />