mirror of
https://github.com/koreanbots/core.git
synced 2025-12-17 06:40:24 +00:00
feat: added toggle component
This commit is contained in:
parent
f4eaff9f61
commit
46aa03f8cb
13
components/Toggle.tsx
Normal file
13
components/Toggle.tsx
Normal 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
|
||||||
Loading…
x
Reference in New Issue
Block a user