66 lines
1.4 KiB
JavaScript
66 lines
1.4 KiB
JavaScript
import React, { useState } from 'react';
|
|
import {
|
|
Container,
|
|
Form,
|
|
FormControl,
|
|
FormGroup,
|
|
InputGroup,
|
|
Input,
|
|
Icon,
|
|
} from 'rsuite';
|
|
|
|
import TimezonePicker from '../components/General/TimezonePicker';
|
|
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>
|
|
</Form>
|
|
</Container>
|
|
);
|
|
}
|