prepare custom price widget

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:

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); */
+}

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>
+  )
+}