npm i framer-motion

import React, { useState } from 'react';
import { motion } from 'framer-motion';

const Switch = ({ initialState = false, onToggle }) => {
    const [isOn, setIsOn] = useState(initialState);

    const toggleSwitch = () => setIsOn(!isOn);

    return (
        <div
            className="flex items-center w-14 h-6 bg-emerald-600/20 rounded-full p-1 cursor-pointer"
            onClick={toggleSwitch}
        >
            <motion.div
                className="w-4 h-4 bg-emerald-600 rounded-full shadow-md"
                animate={{
                    x: isOn ? 32 : 0,
                }}
                transition={{
                    type: "spring",
                    stiffness: 700,
                    damping: 50
                }}
            />
        </div>
    );
};

export default Switch;