hamid zarghami
51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
import { Fragment } from 'react'
|
|
import { Switch } from '@headlessui/react'
|
|
import MoonLoader from 'react-spinners/MoonLoader'
|
|
|
|
interface Props {
|
|
active: boolean,
|
|
onChange: (value: boolean) => void,
|
|
isLoading?: boolean,
|
|
label?: string,
|
|
}
|
|
|
|
const SwitchComponent = (props: Props) => {
|
|
|
|
const handleChange = (value: boolean) => {
|
|
props.onChange(value)
|
|
}
|
|
|
|
if (props.isLoading) {
|
|
return (
|
|
<MoonLoader size={20} color='black' className='ml-4' />
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className='dltr w-fit flex gap-2 items-center'>
|
|
<Switch checked={props.active} onChange={handleChange} as={Fragment}>
|
|
{({ checked }) => (
|
|
<button
|
|
className={`${checked ? 'bg-primary' : 'bg-gray-200'
|
|
} relative inline-flex h-6 w-11 items-center rounded-full`}
|
|
>
|
|
<span className="sr-only">Enable notifications</span>
|
|
<span
|
|
className={`${checked ? 'translate-x-6' : 'translate-x-1'
|
|
} inline-block h-4 w-4 transform rounded-full bg-white transition`}
|
|
/>
|
|
</button>
|
|
)}
|
|
</Switch>
|
|
{
|
|
props.label &&
|
|
<div className='text-sm'>
|
|
: {props.label}
|
|
</div>
|
|
}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default SwitchComponent
|