| 3 | import { cn } from '@/lib/utils' |
| 4 | |
| 5 | const SimpleToggle = ({ |
| 6 | onToggle, |
| 7 | }: { |
| 8 | onToggle?: (toggled: boolean) => void |
| 9 | }) => { |
| 10 | const [toggled, setToggled] = useState(true) |
| 11 | |
| 12 | const handleToggle = () => { |
| 13 | const newState = !toggled |
| 14 | setToggled(newState) |
| 15 | if (onToggle) { |
| 16 | onToggle(newState) |
| 17 | } |
| 18 | } |
| 19 | |
| 20 | return ( |
| 21 | <button |
| 22 | className={`relative h-7 w-12 cursor-pointer rounded-full duration-200`} |
| 23 | onClick={handleToggle} |
| 24 | style={{ |
| 25 | backgroundColor: toggled ? '#fb3a5d' : '#24252d50', |
| 26 | }} |
| 27 | > |
| 28 | <span |
| 29 | className={cn( |
| 30 | `absolute left-0 top-0 rounded-full bg-white shadow-lg transition-all duration-200`, |
| 31 | toggled ? 'translate-x-full transform' : 'translate-x-0 transform', |
| 32 | toggled ? 'h-5 w-5' : 'h-4 w-4', |
| 33 | toggled ? 'm-1' : 'm-1.5', |
| 34 | )} |
| 35 | /> |
| 36 | </button> |
| 37 | ) |
| 38 | } |
| 39 | |
| 40 | export default SimpleToggle |