From aa7fc3c9f0903680151489dbcfffcba49d1351b6 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 20 Jul 2020 23:28:44 +0200
Subject: [PATCH] prepare custom price widget

---
 src/components/atoms/Input/InputElement.tsx   |  3 +++
 .../FormFields/Price/index.module.css         | 26 +++++++++++++++++++
 .../molecules/FormFields/Price/index.tsx      | 20 ++++++++++++++
 3 files changed, 49 insertions(+)
 create mode 100644 src/components/molecules/FormFields/Price/index.module.css
 create mode 100644 src/components/molecules/FormFields/Price/index.tsx

diff --git a/src/components/atoms/Input/InputElement.tsx b/src/components/atoms/Input/InputElement.tsx
index ec780206d..36a1b21b5 100644
--- a/src/components/atoms/Input/InputElement.tsx
+++ b/src/components/atoms/Input/InputElement.tsx
@@ -4,6 +4,7 @@ import styles from './InputElement.module.css'
 import { InputProps } from '.'
 import FilesInput from '../../molecules/FormFields/FilesInput'
 import Terms from '../../molecules/FormFields/Terms'
+import Price from '../../molecules/FormFields/Price'
 
 export default function InputElement(props: InputProps): ReactElement {
   const { type, options, rows, name, value } = props
@@ -56,6 +57,8 @@ export default function InputElement(props: InputProps): ReactElement {
       )
     case 'files':
       return <FilesInput name={name} {...props} />
+    case 'price':
+      return <Price name={name} {...props} />
     case 'terms':
       return <Terms name={name} {...props} />
     default:
diff --git a/src/components/molecules/FormFields/Price/index.module.css b/src/components/molecules/FormFields/Price/index.module.css
new file mode 100644
index 000000000..599fb566f
--- /dev/null
+++ b/src/components/molecules/FormFields/Price/index.module.css
@@ -0,0 +1,26 @@
+.price {
+  display: flex;
+  gap: calc(var(--spacer) / 2);
+  justify-content: center;
+  background: var(--brand-grey-dimmed);
+  margin-left: -2rem;
+  margin-right: -2rem;
+  padding: calc(var(--spacer) * 1.5) var(--spacer);
+}
+
+.price > div {
+  max-width: 8rem;
+  text-align: center;
+}
+
+.price label {
+  color: var(--color-secondary);
+}
+
+.price input {
+  width: 100%;
+  text-align: center;
+  /* color: var(--brand-white);
+  background: rgba(255, 255, 255, 0.1);
+  border-color: var(--brand-grey); */
+}
diff --git a/src/components/molecules/FormFields/Price/index.tsx b/src/components/molecules/FormFields/Price/index.tsx
new file mode 100644
index 000000000..6b5992761
--- /dev/null
+++ b/src/components/molecules/FormFields/Price/index.tsx
@@ -0,0 +1,20 @@
+import React, { ReactElement } from 'react'
+import { InputProps } from '../../../atoms/Input'
+import InputElement from '../../../atoms/Input/InputElement'
+import styles from './index.module.css'
+import Label from '../../../atoms/Input/Label'
+
+export default function Price(props: InputProps): ReactElement {
+  return (
+    <div className={styles.price}>
+      <div>
+        <Label htmlFor="cost">Cost</Label>
+        <InputElement {...props} type="number" />
+      </div>
+      <div>
+        <Label htmlFor="tokensToMint">Tokens to Mint</Label>
+        <InputElement name="tokensToMint" type="number" min="1" />
+      </div>
+    </div>
+  )
+}