Overrides_Template_Basic.tsx

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

// [1] Store (Save states globally)
// This is the same as the variables in the Framer Canvas
const useStore = createStore({
    // key: value
    // value is string, number, boolean, object, array, etc..
    // string should have quotes ("")
    // boolean could have true, false
    background: "red",
})

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

        return (
            <Component
                ref={ref}
                {...props}
                // [2] Properties (style, text, variant, etc..)
                // This is the same as the Properties panel in the Framer Canvas
                // propertyName={value}
                style={{
                    background: store.background,
                }}
                // [3] Event Properties (onClick, onMouseEnter, onMouseLeave, etc..)
                // This is the same as the Interactions panel in the Framer Canvas
                // eventPropertyName={function}
                
                // if () {}
                // else if () {}
                // else {}
                
                onClick={() => {
                    setStore({ background: "blue" })
                }}
            />
        )
    })
}