NumberControl.tsx

import { Data, animate, Override, Animatable } from "framer"

const data = Data({ 
    plusOpacity: 1,
    minusOpacity: 0.3,
    page: 0
})

export const PlusButtonStatus: Override = () => {
    return {
        opacity: data.plusOpacity
    }
}

export const MinusButtonStatus: Override = () => {
    return {
        opacity: data.minusOpacity
    }
}

export const QuantityNumber: Override = () => {
    return {
        currentPage: data.page
    }
}

export const PlusButton: Override = () => {
    return {
        onTap() {
            if (data.page < 4) {
                data.minusOpacity = 1
                data.page = data.page + 1
            }

            if (data.page === 4) {
                data.plusOpacity = 0.3
            }            
        }
    }
}

export const MinusButton: Override = () => {
    return {
        onTap() {
            if (data.page > 0) {
                data.plusOpacity = 1
                data.page = data.page - 1
            }

            if (data.page === 0) {
                data.minusOpacity = 0.3
            }            
        }        
    }
}