29 lines
775 B
TypeScript
29 lines
775 B
TypeScript
import { ISwitcher } from "../types/switcher";
|
|
|
|
interface ISwitchProps {
|
|
switcher: ISwitcher;
|
|
onClick: ((id: string) => void) | (() => void);
|
|
}
|
|
|
|
const Switch = ({ switcher, onClick }: ISwitchProps) => {
|
|
function handleOnClick() {
|
|
onClick(switcher.id);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={`w-[40px] h-[24px] zoom-280 relative rounded-full cursor-pointer transition-all duration-300 ease-in-out ${
|
|
switcher.isSwitched ? "bg-[#00BED7]" : "bg-[#E2E2DC]"
|
|
}`}
|
|
onClick={handleOnClick}
|
|
>
|
|
<div
|
|
className={`w-[20px] h-[20px] bg-[#fff] rounded-full absolute transition-all duration-300 ease-in-out top-[2px]
|
|
${switcher.isSwitched ? "left-[18px]" : "left-[2px]"}`}
|
|
></div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Switch;
|