()
| 5 | import { useState } from 'react' |
| 6 | |
| 7 | const EcoModeButton = () => { |
| 8 | const [isActivated, setIsActivated] = useState(false) |
| 9 | const leafControls = useAnimation() |
| 10 | |
| 11 | const handleClick = async () => { |
| 12 | setIsActivated(!isActivated) |
| 13 | await leafControls.start({ |
| 14 | scale: [1, 1.2, 1], |
| 15 | rotate: [0, 10, -10, 0], |
| 16 | transition: { duration: 0.5 }, |
| 17 | }) |
| 18 | } |
| 19 | |
| 20 | return ( |
| 21 | <motion.button |
| 22 | className="relative overflow-hidden rounded-full bg-red-500 px-4 py-3 text-sm font-medium text-white" |
| 23 | onClick={handleClick} |
| 24 | whileTap={{ scale: 0.95 }} |
| 25 | > |
| 26 | <motion.div |
| 27 | className="absolute inset-0 bg-green-600" |
| 28 | initial={{ scaleX: 0 }} |
| 29 | animate={{ scaleX: isActivated ? 1 : 0 }} |
| 30 | transition={{ duration: 0.5 }} |
| 31 | style={{ transformOrigin: 'left' }} |
| 32 | /> |
| 33 | <motion.div className="relative z-10 flex items-center justify-center space-x-1"> |
| 34 | <Leaf size={16} /> |
| 35 | <span>{isActivated ? 'Eco Mode On' : 'Eco Mode Off'}</span> |
| 36 | </motion.div> |
| 37 | {isActivated && ( |
| 38 | <motion.div |
| 39 | className="absolute inset-0 flex items-center justify-center" |
| 40 | initial={{ opacity: 0 }} |
| 41 | animate={{ opacity: 1 }} |
| 42 | transition={{ delay: 0.2 }} |
| 43 | > |
| 44 | {[...Array(20)].map((_, i) => ( |
| 45 | <motion.div |
| 46 | key={i} |
| 47 | className="absolute h-1 w-1 rounded-full bg-green-200" |
| 48 | style={{ |
| 49 | top: Math.random() * 100 + '%', |
| 50 | left: Math.random() * 100 + '%', |
| 51 | }} |
| 52 | animate={{ |
| 53 | y: [0, -20, 0], |
| 54 | opacity: [0, 1, 0], |
| 55 | }} |
| 56 | transition={{ |
| 57 | duration: Math.random() * 2 + 1, |
| 58 | repeat: Infinity, |
| 59 | delay: Math.random() * 2, |
| 60 | }} |
| 61 | /> |
| 62 | ))} |
| 63 | </motion.div> |
| 64 | )} |
nothing calls this directly
no outgoing calls
no test coverage detected