30 lines
793 B
TypeScript
30 lines
793 B
TypeScript
import clsx from "clsx";
|
|
|
|
interface SwitchProps {
|
|
enabled: boolean;
|
|
onChange: (enabled: boolean) => void;
|
|
}
|
|
|
|
function Switch({ enabled, onChange }: SwitchProps) {
|
|
return (
|
|
<div
|
|
onClick={() => onChange(!enabled)}
|
|
className={clsx(
|
|
"2xl:rounded-[0.833vw] rounded-xl 2xl:w-[2.778vw] w-10 2xl:py-[0.139vw] py-[2px] cursor-pointer transition-colors",
|
|
enabled ? "bg-[#7B60F3]" : "bg-[#F0F0F0]"
|
|
)}
|
|
>
|
|
<div
|
|
className={clsx(
|
|
"rounded-full 2xl:size-[1.389vw] size-5 bg-white shadow-[0_4px_40px_0_rgba(15,16,17,0.1)] transition-all",
|
|
enabled
|
|
? "2xl:translate-x-[1.25vw] translate-x-[18px]"
|
|
: "2xl:translate-x-[0.139vw] translate-x-[2px]"
|
|
)}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Switch;
|