Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | 1x 1x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 11x 11x 11x 11x 11x 11x 6x 6x 6x | import { FC } from 'react'
import { Switch as HeadlessSwitch } from '@headlessui/react'
import { ControllerRenderProps } from 'react-hook-form'
import cn from 'classnames'
export interface SwitchProps extends ControllerRenderProps {
label?: string
disabled?: boolean
wrapperClassName?: string
labelClassName?: string
}
export const Switch: FC<SwitchProps> = ({ name, value, label, wrapperClassName, labelClassName, ...rest }) => {
return (
<HeadlessSwitch.Group
data-testid='switch-wrapper'
as='div'
className={cn('flex items-center gap-2', wrapperClassName)}
>
{label && <HeadlessSwitch.Label className={cn('source-text', labelClassName)}>{label}</HeadlessSwitch.Label>}
<HeadlessSwitch
{...rest}
id={name}
name={name}
checked={value}
className='relative inline-flex items-center w-10 group h-small bg-border rounded-xl disabled:bg-background-primary disabled:cursor-not-allowed'
>
{({ checked }) => (
<span
aria-hidden='true'
className={cn('w-5 h-5 bg-main rounded-full inline-block transition-all group-disabled:bg-border', {
'translate-x-5 bg-secondary': checked,
})}
/>
)}
</HeadlessSwitch>
</HeadlessSwitch.Group>
)
}
|