File size: 618 Bytes
b2a00c5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | import React from 'react'
import classNames from 'classnames'
export function Toggle({ on, disabled }: { on: boolean; disabled?: boolean }) {
return (
<div
className={classNames(
'relative inline-flex h-4 w-7 shrink-0 rounded-full transition-colors duration-200',
on && !disabled ? 'bg-indigo-600' : 'bg-gray-200 dark:bg-gray-600'
)}
>
<span
className={classNames(
'inline-block mt-0.5 h-3 w-3 rounded-full bg-white shadow-sm transition-transform duration-200',
on ? 'translate-x-[14px]' : 'translate-x-0.5'
)}
/>
</div>
)
}
|