feat: added toggle component

This commit is contained in:
원더 2021-02-11 20:59:22 +09:00
parent f4eaff9f61
commit 46aa03f8cb

13
components/Toggle.tsx Normal file
View File

@ -0,0 +1,13 @@
const Toggle = ({ checked, onChange }:ToggleProps):JSX.Element => {
return <button className='relative inline-block w-10 mr-2 align-middle select-none outline-none' onClick={onChange} onKeyPress={onChange}>
<input type='checkbox' checked={checked} className='absolute block w-6 h-6 rounded-full bg-white border-4 border-transparent appearance-none cursor-pointer outline-none checked:right-0'/>
<span className={`block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer ${checked ? 'bg-koreanbots-blue' : ''}`}></span>
</button>
}
interface ToggleProps {
checked: boolean,
onChange(): void
}
export default Toggle