39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
import { Switch } from '@headlessui/react';
|
|
import React, { useEffect, useState } from 'react';
|
|
|
|
type ToggleSwitchProps = {
|
|
isChecked?: boolean;
|
|
onChange?: (checked: boolean) => void;
|
|
};
|
|
|
|
const SwitchButton: React.FC<ToggleSwitchProps> = ({ isChecked = true, onChange }) => {
|
|
const [enabled, setEnabled] = useState(isChecked);
|
|
|
|
useEffect(() => {
|
|
setEnabled(isChecked);
|
|
}, [isChecked]);
|
|
|
|
const handleChange = (checked: boolean) => {
|
|
setEnabled(checked);
|
|
if (onChange) {
|
|
onChange;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Switch
|
|
checked={enabled}
|
|
onChange={handleChange}
|
|
className={`${enabled ? 'bg-[#579D42]' : 'bg-gray-400'}
|
|
relative inline-flex items-center h-8 w-13 rounded-full transition-colors ease-in-out duration-200`}
|
|
>
|
|
<span
|
|
className={`${enabled ? 'translate-x-6' : 'translate-x-1'}
|
|
inline-block w-6 h-6 transform bg-white rounded-full transition-transform ease-in-out duration-200`}
|
|
/>
|
|
</Switch>
|
|
);
|
|
};
|
|
|
|
export default SwitchButton;
|