From a3011d1da7a1d9c141a6fbd3431f14102488e0d5 Mon Sep 17 00:00:00 2001
From: mantikoros <sgrugett@gmail.com>
Date: Sat, 29 Jan 2022 22:12:09 -0600
Subject: [PATCH] ProbabilitySelector

---
 web/components/probability-selector.tsx | 36 +++++++++++++++++++++++++
 web/pages/create.tsx                    | 30 +++++----------------
 2 files changed, 42 insertions(+), 24 deletions(-)
 create mode 100644 web/components/probability-selector.tsx

diff --git a/web/components/probability-selector.tsx b/web/components/probability-selector.tsx
new file mode 100644
index 00000000..2fc03787
--- /dev/null
+++ b/web/components/probability-selector.tsx
@@ -0,0 +1,36 @@
+import { Row } from './layout/row'
+
+export function ProbabilitySelector(props: {
+  probabilityInt: number
+  setProbabilityInt: (p: number) => void
+  isSubmitting?: boolean
+}) {
+  const { probabilityInt, setProbabilityInt, isSubmitting } = props
+
+  return (
+    <Row className="items-center gap-2">
+      <label className="input-group input-group-lg w-fit text-lg">
+        <input
+          type="number"
+          value={probabilityInt}
+          className="input input-bordered input-md text-lg"
+          disabled={isSubmitting}
+          min={1}
+          max={99}
+          onChange={(e) =>
+            setProbabilityInt(parseInt(e.target.value.substring(0, 2)))
+          }
+        />
+        <span>%</span>
+      </label>
+      <input
+        type="range"
+        className="range range-primary"
+        min={1}
+        max={99}
+        value={probabilityInt}
+        onChange={(e) => setProbabilityInt(parseInt(e.target.value))}
+      />
+    </Row>
+  )
+}
diff --git a/web/pages/create.tsx b/web/pages/create.tsx
index 42e7d44f..4cd8b352 100644
--- a/web/pages/create.tsx
+++ b/web/pages/create.tsx
@@ -15,6 +15,7 @@ import { InfoTooltip } from '../components/info-tooltip'
 import { CREATOR_FEE } from '../../common/fees'
 import { Page } from '../components/page'
 import { Title } from '../components/title'
+import { ProbabilitySelector } from '../components/probability-selector'
 
 export default function Create() {
   const [question, setQuestion] = useState('')
@@ -127,30 +128,11 @@ export function NewContract(props: { question: string; tag?: string }) {
         <label className="label">
           <span className="mb-1">Initial probability</span>
         </label>
-        <Row className="items-center gap-2">
-          <label className="input-group input-group-lg w-fit text-lg">
-            <input
-              type="number"
-              value={initialProb}
-              className="input input-bordered input-md text-lg"
-              disabled={isSubmitting}
-              min={1}
-              max={99}
-              onChange={(e) =>
-                setInitialProb(parseInt(e.target.value.substring(0, 2)))
-              }
-            />
-            <span>%</span>
-          </label>
-          <input
-            type="range"
-            className="range range-primary"
-            min={1}
-            max={99}
-            value={initialProb}
-            onChange={(e) => setInitialProb(parseInt(e.target.value))}
-          />
-        </Row>
+
+        <ProbabilitySelector
+          probabilityInt={initialProb}
+          setProbabilityInt={setInitialProb}
+        />
       </div>
 
       <Spacer h={4} />