Toggle

'use client'
import { useState } from 'react'

export default function Toggle() {
  const [isOn, setIsOn] = useState(false)

  return (
    <div className="p-4">
      <div
        onClick={() => setIsOn(!isOn)}
        className={`relative w-16 h-8 flex items-center
          border-2 rounded-full cursor-pointer transition-colors duration-300
        ${isOn ? 'bg-[#c8e6c9] border-[#81c784]' : 'bg-gray-200 border-[#e8e8e8] dark:border-[#4c4c4c] dark:bg-[#2a2a2a]'}`}>
        <div
          className={`absolute top-1 left-1 w-5 h-5 rounded-full bg-white
          transform transition-transform duration-300 ease-in-out
        ${isOn ? 'translate-x-8' : 'translate-x-0'}`}/>
      </div>
    </div>
  )
}

'use client'
import { useState } from 'react'

export default function ToggleSnappy() {
  const [isOn, setIsOn] = useState(false)

  return (
    <div className="p-4">
      <div
        onClick={() => setIsOn(!isOn)}
        className={`relative w-16 h-8 flex items-center rounded-full cursor-pointer
        border-2 transition-colors duration-300
      ${isOn ? 'bg-[#c8e6c9] dark:border-[#81c784] border-[#81c784]' : 'bg-gray-200 border-[#e8e8e8] dark:border-[#4c4c4c] dark:bg-[#2a2a2a]'}`}>
        <div
          className={`absolute top-1 left-1 w-5 h-5 bg-white rounded-full
          transform transition-transform duration-300
        ${isOn ? 'translate-x-8 scale-90' : 'translate-x-0 scale-90'}`}
          style={{
          transitionTimingFunction: 'cubic-bezier(0.68, -0.6, 0.32, 1.6)'}}/>
      </div>
    </div>
  )
}