new price tabs UI

src/components/atoms/Tabs.module.css

@@ -10,6 +10,7 @@
   padding: calc(var(--spacer) / 12) var(--spacer);
   border-radius: var(--border-radius);
   font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-small);
   text-transform: uppercase;
   cursor: pointer;
   color: var(--brand-grey-light);

src/components/molecules/FormFields/Price/index.module.css

@@ -1,23 +1,53 @@
 .price {
-  display: flex;
-  gap: calc(var(--spacer) / 2);
-  justify-content: center;
   border: 1px solid var(--brand-grey-lighter);
   background: var(--brand-grey-dimmed);
   border-radius: var(--border-radius);
-  padding: var(--spacer);
 }
 
-.price > div {
+.content {
+  padding: 0 calc(var(--spacer) / 2);
+  text-align: center;
+}
+
+.content label {
+  color: var(--color-secondary);
+}
+
+.content input {
   max-width: 8rem;
   text-align: center;
 }
 
-.price label {
+.content p {
-  color: var(--color-secondary);
+  margin-bottom: 0;
 }
 
-.price input {
+.simpleInput {
-  width: 100%;
+  display: flex;
-  text-align: center;
+  justify-content: center;
+  margin-bottom: calc(var(--spacer) / 2);
+}
+
+.simpleInput input {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.prefix {
+  border: 1px solid var(--brand-grey-lighter);
+  display: flex;
+  align-items: center;
+  padding-left: calc(var(--spacer) / 2);
+  padding-right: calc(var(--spacer) / 2);
+  color: var(--color-secondary);
+  font-size: var(--font-size-small);
+  margin-right: -2px;
+  border-top-left-radius: var(--border-radius);
+  border-bottom-left-radius: var(--border-radius);
+}
+
+.advancedInput {
+  display: flex;
+  gap: calc(var(--spacer) / 2);
+  justify-content: center;
 }

src/components/molecules/FormFields/Price/index.tsx

@@ -5,17 +5,43 @@ import styles from './index.module.css'
 import Label from '../../../atoms/Input/Label'
 import { useFormikContext } from 'formik'
 import { MetadataPublishForm } from '../../../../@types/MetaData'
+import Tabs from '../../../atoms/Tabs'
+import FormHelp from '../../../atoms/Input/Help'
 
 export default function Price(props: InputProps): ReactElement {
   const { values } = useFormikContext()
 
-  return (
+  const Simple = (
-    <div className={styles.price}>
+    <div className={styles.content}>
+      <div className={styles.simpleInput}>
+        {/* <Label htmlFor="price.cost">Cost</Label> */}
+        <div className={styles.prefix}>OCEAN</div>
+        <InputElement
+          {...props.field}
+          value={
+            ((values as MetadataPublishForm).price &&
+              (values as MetadataPublishForm).price.cost) ||
+            ''
+          }
+          name="price.cost"
+          type="number"
+        />
+      </div>
+      <FormHelp>{props.help}</FormHelp>
+    </div>
+  )
+
+  const Advanced = (
+    <div className={`${styles.content} ${styles.advancedInput}`}>
       <div>
         <Label htmlFor="price.cost">Cost</Label>
         <InputElement
           {...props.field}
-          value={(values as MetadataPublishForm).price.cost}
+          value={
+            ((values as MetadataPublishForm).price &&
+              (values as MetadataPublishForm).price.cost) ||
+            ''
+          }
           name="price.cost"
           type="number"
         />
@@ -24,11 +50,32 @@ export default function Price(props: InputProps): ReactElement {
         <Label htmlFor="price.tokensToMint">Tokens to Mint</Label>
         <InputElement
           {...props.field}
-          value={(values as MetadataPublishForm).price.tokensToMint}
+          value={
+            ((values as MetadataPublishForm).price &&
+              (values as MetadataPublishForm).price.tokensToMint) ||
+            ''
+          }
           name="price.tokensToMint"
           type="number"
         />
       </div>
     </div>
   )
+
+  const tabs = [
+    {
+      title: 'Simple',
+      content: Simple
+    },
+    {
+      title: 'Advanced',
+      content: Advanced
+    }
+  ]
+
+  return (
+    <div className={styles.price}>
+      <Tabs items={tabs} />
+    </div>
+  )
 }