Robin Malfait
6e3d496998
* add Switch component * add tests to verify that we can click the label to toggle the Switch * use onKeyUp to prevent triggering the onClick in firefox
40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
import * as React from 'react'
|
|
import { Switch } from '@headlessui/react'
|
|
|
|
import { classNames } from '../../src/utils/class-names'
|
|
|
|
export default function Home() {
|
|
const [state, setState] = React.useState(false)
|
|
|
|
return (
|
|
<div className="flex items-start justify-center w-screen h-full p-12 bg-gray-50">
|
|
<Switch.Group as="div" className="flex items-center space-x-4">
|
|
<Switch.Label>Enable notifications</Switch.Label>
|
|
|
|
<Switch
|
|
as="button"
|
|
checked={state}
|
|
onChange={setState}
|
|
className={({ checked }) =>
|
|
classNames(
|
|
'relative inline-flex flex-shrink-0 h-6 border-2 border-transparent rounded-full cursor-pointer w-11 focus:outline-none focus:shadow-outline transition-colors ease-in-out duration-200',
|
|
checked ? 'bg-indigo-600' : 'bg-gray-200'
|
|
)
|
|
}
|
|
>
|
|
{({ checked }) => (
|
|
<>
|
|
<span
|
|
className={classNames(
|
|
'inline-block w-5 h-5 bg-white rounded-full transform transition ease-in-out duration-200',
|
|
checked ? 'translate-x-5' : 'translate-x-0'
|
|
)}
|
|
/>
|
|
</>
|
|
)}
|
|
</Switch>
|
|
</Switch.Group>
|
|
</div>
|
|
)
|
|
}
|