Skip to content
This repository has been archived by the owner on Apr 22, 2021. It is now read-only.

Add options to company size, employment type and gender #35

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 24 additions & 9 deletions src/pages/CreateSalary/CreateSalary.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ import {
IonIcon,
IonButtons,
IonBackButton,
IonSelect,
IonSelectOption,
} from '@ionic/react';

import { closeCircleOutline, arrowBack } from 'ionicons/icons';
Expand All @@ -39,6 +41,10 @@ const CreateSalary: React.FC = () => {
});
const [technology, setTechnology] = useState('');

const employmentTypes = ['freelancer', 'contractor', 'employee'];
const genders = ['female', 'male', 'other'];
const companySizes = ['0-10', '10-50', '+50'];

const confirmSalary = () => {
console.log(formNewSalary);
};
Expand Down Expand Up @@ -119,7 +125,7 @@ const CreateSalary: React.FC = () => {
</div>
<div className="input-wrapper">
<IonLabel class="label">Employment Type</IonLabel>
<IonInput
<IonSelect
onIonChange={(e) =>
setFormNewSalary({
...formNewSalary,
Expand All @@ -128,12 +134,15 @@ const CreateSalary: React.FC = () => {
}
className="input ion-margin-top"
value={formNewSalary.employmentType}
type="text"
></IonInput>
>
{employmentTypes.map((type: string) => (
<IonSelectOption value={type}>{type}</IonSelectOption>
))}
</IonSelect>
</div>
<div className="input-wrapper">
<IonLabel class="label">Company size</IonLabel>
<IonInput
<IonSelect
onIonChange={(e) =>
setFormNewSalary({
...formNewSalary,
Expand All @@ -142,8 +151,11 @@ const CreateSalary: React.FC = () => {
}
className="input ion-margin-top"
value={formNewSalary.companySize}
type="text"
></IonInput>
>
{companySizes.map((size: string) => (
<IonSelectOption value={size}>{size}</IonSelectOption>
))}
</IonSelect>
</div>
<div className="input-wrapper">
<IonLabel class="label">Gross Annual Salary (€)</IonLabel>
Expand Down Expand Up @@ -177,7 +189,7 @@ const CreateSalary: React.FC = () => {

<div className="input-wrapper">
<IonLabel class="label">Gender</IonLabel>
<IonInput
<IonSelect
onIonChange={(e) =>
setFormNewSalary({
...formNewSalary,
Expand All @@ -186,8 +198,11 @@ const CreateSalary: React.FC = () => {
}
className="input ion-margin-top"
value={formNewSalary.gender}
type="text"
></IonInput>
>
{genders.map((gender: string) => (
<IonSelectOption value={gender}>{gender}</IonSelectOption>
))}
</IonSelect>
</div>

<div className="input-wrapper">
Expand Down