frontend/src/screens/Schedule.js

import React, { useState } from 'react';
import {
	Container,
	Form,
	FormControl,
	FormGroup,
	InputGroup,
	Input,
	Icon,
} from 'rsuite';

import TimezonePicker from '../components/General/TimezonePicker';
import DaySelector from '../components/Schedule/DaySelector';
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>
			<Form>
				<FormGroup>
					<FormControl name='title' type='text' placeholder='title' />
				</FormGroup>
				<FormGroup>
					<Input
						name='description'
						componentClass='textarea'
						type='text'
						rows={3}
						placeholder='Description'
					/>
				</FormGroup>
				<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>
				<DaySelector />
				<FormGroup></FormGroup>
			</Form>
		</Container>
	);
}