42 lines
No EOL
1.2 KiB
TypeScript
42 lines
No EOL
1.2 KiB
TypeScript
import {FC} from "react";
|
|
|
|
interface ToggleProps {
|
|
checked: boolean;
|
|
onChange: (checked: boolean) => void;
|
|
}
|
|
|
|
const Toggle: FC<ToggleProps> = ({ checked, onChange }) => {
|
|
const handleChange = () => {
|
|
onChange(checked);
|
|
}
|
|
|
|
return (
|
|
<label
|
|
className="flex items-center relative w-max cursor-pointer select-none"
|
|
>
|
|
{/* Hidden input */}
|
|
<input
|
|
type="checkbox"
|
|
checked={checked}
|
|
onChange={() => handleChange()} // Update state using the checkbox itself
|
|
className="sr-only"
|
|
/>
|
|
|
|
{/* Toggle text-accent-blue */}
|
|
<div
|
|
className={`relative transition-colors w-14 h-7 rounded-full cursor-pointer ${
|
|
checked ? "bg-green-500" : "bg-red-500"
|
|
}`}
|
|
>
|
|
{/* The slider dot */}
|
|
<span
|
|
className={`absolute top-0.5 left-0.5 w-6 h-6 rounded-full transform transition-transform bg-white ${
|
|
checked ? "translate-x-7" : "translate-x-0"
|
|
}`}
|
|
></span>
|
|
</div>
|
|
</label>
|
|
);
|
|
};
|
|
|
|
export default Toggle; |