Allow the user to select recommended options when selecting the current position

src/pages/CreateSalary/CreateSalary.scss

@@ -35,6 +35,13 @@ ion-content {
           margin: 0;
         }
       }
+      .input-options-list {
+        margin-top: 10px;
+        .input-options-list__item {
+          margin: 0 5px;
+          cursor: pointer;
+        }
+      }
     }
   }
 }

src/pages/CreateSalary/CreateSalary.tsx

@@ -16,6 +16,7 @@ import {
   IonIcon,
   IonButtons,
   IonBackButton,
+  IonBadge,
 } from '@ionic/react';
 
 import { closeCircleOutline, arrowBack } from 'ionicons/icons';
@@ -38,11 +39,24 @@ const CreateSalary: React.FC = () => {
     weeklyHours: 0,
   });
   const [technology, setTechnology] = useState('');
+  const [availablePositions, setAvailablePositions] = useState([
+    'Developer',
+    'QA',
+  ]);
 
   const confirmSalary = () => {
     console.log(formNewSalary);
   };
 
+  const onCurrentPositionChange = (value: string) => {
+    // TODO: update list of available positions based on what the user typed
+    setAvailablePositions(['Scrum Master', 'CEO']);
+    setFormNewSalary({
+      ...formNewSalary,
+      position: value,
+    });
+  };
+
   const addNewTechnology = () => {
     if (!technology || formNewSalary.technologies.includes(technology)) return;
     setFormNewSalary({
@@ -93,15 +107,27 @@ const CreateSalary: React.FC = () => {
               <IonLabel class="label">Current Position</IonLabel>
               <IonInput
                 onIonChange={(e) =>
-                  setFormNewSalary({
-                    ...formNewSalary,
-                    position: e.detail.value! as string,
-                  })
+                  onCurrentPositionChange(e.detail.value! as string)
                 }
                 type="text"
                 className="input ion-margin-top"
                 value={formNewSalary.position}
               ></IonInput>
+              <div className="input-options-list">
+                {availablePositions.map((position: string) => (
+                  <IonBadge
+                    onClick={() =>
+                      setFormNewSalary({
+                        ...formNewSalary,
+                        position,
+                      })
+                    }
+                    className="input-options-list__item"
+                  >
+                    {position}
+                  </IonBadge>
+                ))}
+              </div>
             </div>
             <div className="input-wrapper">
               <IonLabel class="label">Role</IonLabel>