Add duration selector

src/screens/Schedule.js

@@ -1,9 +1,32 @@
-import React from 'react';
+import React, { useState } from 'react';
+import {
+	Container,
+	Form,
+	FormControl,
+	FormGroup,
+	InputGroup,
+	Input,
+	Icon,
+} from 'rsuite';
 
 import TimezonePicker from '../components/General/TimezonePicker';
-import { Container, Form, FormControl, FormGroup, Input } from 'rsuite';
+import { durations } from '../assets/data/durations';
 
 export default function Schedule() {
+	const [durationIdx, setDurationIdx] = useState(0);
+
+	const handleIncrement = () => {
+		if (durationIdx <= durations.length-2) {
+			setDurationIdx(durationIdx + 1);
+		}
+	};
+
+	const handleDecrement = () => {
+		if (durationIdx > 0) {
+			setDurationIdx(durationIdx - 1);
+		}
+	};
+
 	return (
 		<Container>
 			<h3>Schedule a meeting</h3>
@@ -23,6 +46,19 @@ export default function Schedule() {
 				<FormGroup>
 					<TimezonePicker />
 				</FormGroup>
+				<FormGroup style={{ width: 200 }}>
+					<InputGroup style={{background: 'white'}}>
+						<InputGroup.Button onClick={handleDecrement}>
+							<Icon icon='minus' />
+						</InputGroup.Button>
+						<div style={{ textAlign: 'center', paddingTop:5 }}>
+							{durations[durationIdx].label}
+						</div>
+						<InputGroup.Button onClick={handleIncrement}>
+							<Icon icon='plus' />
+						</InputGroup.Button>
+					</InputGroup>
+				</FormGroup>
 			</Form>
 		</Container>
 	);