32 lines
839 B
JavaScript
32 lines
839 B
JavaScript
import React, {useState} from 'react';
|
|
import { InputGroup, Icon } from 'rsuite';
|
|
import { durations } from '../../assets/data/durations';
|
|
|
|
export default function DurationSelector() {
|
|
const [durationIdx, setDurationIdx] = useState(0);
|
|
|
|
const handleIncrement = () => {
|
|
if (durationIdx <= durations.length - 2) {
|
|
setDurationIdx(durationIdx + 1);
|
|
}
|
|
};
|
|
const handleDecrement = () => {
|
|
if (durationIdx > 0) {
|
|
setDurationIdx(durationIdx - 1);
|
|
}
|
|
};
|
|
return (
|
|
<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>
|
|
);
|
|
}
|