42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
|
|
interface ToggleSwitchProps {
|
|
checked: boolean;
|
|
onChange: (checked: boolean) => void;
|
|
disabled?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
export const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
|
|
checked,
|
|
onChange,
|
|
disabled = false,
|
|
className = '',
|
|
}) => {
|
|
return (
|
|
<label className={`flex items-center cursor-pointer ${disabled ? 'opacity-50 cursor-not-allowed' : ''} ${className}`}>
|
|
<input
|
|
type="checkbox"
|
|
checked={checked}
|
|
onChange={(e) => onChange(e.target.checked)}
|
|
disabled={disabled}
|
|
className="sr-only"
|
|
/>
|
|
<div
|
|
className={`relative w-11 h-6 rounded-full transition-colors ${
|
|
checked
|
|
? 'bg-primary-600'
|
|
: 'bg-gray-300 dark:bg-gray-600'
|
|
} ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
|
|
>
|
|
<div
|
|
className={`absolute top-0.5 left-0.5 bg-white rounded-full h-5 w-5 transition-transform ${
|
|
checked ? 'translate-x-5' : 'translate-x-0'
|
|
}`}
|
|
/>
|
|
</div>
|
|
</label>
|
|
);
|
|
};
|
|
|