46 lines
1.3 KiB
JavaScript
46 lines
1.3 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
|
|
const SegmentedControl = ({setFrequency,defultFequency}) => {
|
|
const [selected, setSelected] = useState(defultFequency);
|
|
useEffect(()=>{
|
|
setFrequency(selected)
|
|
},[selected])
|
|
return (
|
|
<div className='text-center mt-6'>
|
|
<div className="d-inline-flex border rounded-pill overflow-hidden shadow-none">
|
|
<button
|
|
type="button"
|
|
className={`btn px-4 py-2 rounded-0 ${selected === 0 ? 'active btn-secondary text-white' : ''}`}
|
|
onClick={() => setSelected(0)}
|
|
>
|
|
Monthly
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className={`btn px-4 py-2 rounded-0 ${selected === 1? 'active btn-secondary text-white' : ''}`}
|
|
onClick={() => setSelected(1)}
|
|
>
|
|
Quaterly
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className={`btn px-4 py-2 rounded-0 ${selected === 2 ? 'active btn-secondary text-white' : ''}`}
|
|
onClick={() => setSelected(2)}
|
|
>
|
|
Half-Yearly
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
className={`btn px-4 py-2 rounded-0 ${selected === 3 ? 'active btn-secondary text-white' : ''}`}
|
|
onClick={() => setSelected(3)}
|
|
>
|
|
Yearly
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SegmentedControl;
|