| 4 | import { cn } from '@/lib/utils' |
| 5 | |
| 6 | const IconToggle = ({ |
| 7 | onToggle, |
| 8 | }: { |
| 9 | onToggle?: (toggled: boolean) => void |
| 10 | }) => { |
| 11 | const [toggled, setToggled] = useState(true) |
| 12 | |
| 13 | const handleToggle = () => { |
| 14 | const newState = !toggled |
| 15 | setToggled(newState) |
| 16 | if (onToggle) { |
| 17 | onToggle(newState) |
| 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 flex items-center justify-center 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 | <span className="relative flex h-full w-full"> |
| 37 | <Check |
| 38 | size={13} |
| 39 | strokeWidth={3} |
| 40 | className={cn( |
| 41 | 'absolute left-0 top-0 h-full w-full p-1 text-red-500 transition-opacity duration-200', |
| 42 | toggled ? 'opacity-100' : 'opacity-0', |
| 43 | )} |
| 44 | /> |
| 45 | <X |
| 46 | size={13} |
| 47 | strokeWidth={3} |
| 48 | className={cn( |
| 49 | 'absolute left-0 top-0 h-full w-full p-0.5 text-[#24252d50] transition-opacity duration-200', |
| 50 | toggled ? 'opacity-0' : 'opacity-100', |
| 51 | )} |
| 52 | /> |
| 53 | </span> |
| 54 | </span> |
| 55 | </button> |
| 56 | ) |
| 57 | } |
| 58 | |
| 59 | export default IconToggle |