Overrides.tsx

import { forwardRef, type ComponentType } from "react"
import { createStore } from "https://framer.com/m/framer/store.js@^1.0.0"

const useStore = createStore({
    background: "green",

    likes: "1",
    userLiked: false,
})

export function myOverride(Component): ComponentType {
    return forwardRef((props, ref) => {
        const [store, setStore] = useStore()

        return (
            <Component
                ref={ref}
                {...props}
                style={{
                    background: store.background,
                }}
                onClick={() => {
                    setStore({ background: "purple" })
                }}
            />
        )
    })
}

export function like(Component): ComponentType {
    return forwardRef((props, ref) => {
        const [store, setStore] = useStore()

        return (
            <Component
                ref={ref}
                {...props}
                onClick={() => {
                    if (store.userLiked)
                        setStore({ likes: "1", userLiked: false })
                    else setStore({ likes: "2", userLiked: true })
                }}
            />
        )
    })
}

export function likeNumber(Component): ComponentType {
    return forwardRef((props, ref) => {
        const [store, setStore] = useStore()

        return <Component ref={ref} {...props} text={store.likes} />
    })
}

export function notification(Component): ComponentType {
    return forwardRef((props, ref) => {
        const [store, setStore] = useStore()

        let variant = "default"
        if (store.userLiked) variant = "ruucm"
        else variant = "default"

        return <Component ref={ref} {...props} variant={variant} />
    })
}