Switch Button Magic By Framer Motion

How to create an animated switch button in React?
First, we install tailwindcss for this job
There will be two elements in the switch button: a container and a bull.

container
cursor-pointer w-16 h-10 flex items-center bg-gray-300 rounded-full p-1
bull
bg-white w-8 h-8 rounded-full shadow-md

It's that easy to have a static switch button.
now we need to add click behavior.
lets create a simple use state hook to toggle active state.
const [isSelected, setSelected] = useState(false)
on container we will add click handler
onClick={() => setSelected(!isSelected)}
and interactive css

${isSelected ? 'bg-red-500 justify-end' : 'justify-start'}

Take it for a test.
its working but something is missing.
Yes, animation, are you ready for the magic 🪄?
Change the bull div to be motion div.
Add the magic layout property.
ta dam 🎉🎉🎉 you have a nice switch button.

you can see and play with the code - run in terminal - npm run build && npm run preview.