9. Cycling through states

export default function CC_09_Cycling_through_states(props) {
    const [animate, cycle] = useCycle(
        { scale: 1, rotate: 0 },
        { scale: 1.25, rotate: 90 }
    )

    return (
        <div>
            <motion.div
                style={{
                    width: 150,
                    height: 150,
                    borderRadius: 30,
                    backgroundColor: "#fff",
                    cursor: "pointer",
                }}
                animate={animate}
                onTap={cycle}
            />
        </div>
    )
}

export function Cycling_through_states(Component): ComponentType {
    return (props) => {
        const [animate, cycle] = useCycle(
            { scale: 1, rotate: 0 },
            { scale: 1.25, rotate: 90 }
        )

        return <Component {...props} animate={animate} onTap={cycle} />
    }
}