react-context.tsx

import React from "https://esm.sh/react";
import ReactDOM from "https://esm.sh/react-dom/client";

// ==========

enum SeasonTypes {
    SUMMER = "summer",
    WINTER = "winter"
}

interface SeasonContextValue {
    season: SeasonTypes.SUMMER | SeasonTypes.WINTER;
}

const SeasonContext = React.createContext<SeasonContextValue | null>(null);

function SeasonProvider({ children }) {
    const [season, setSeason] = React.useState(SeasonTypes.SUMMER);

    return (
        <SeasonContext.Provider value={{ season, setSeason }}>
            {children}
        </SeasonContext.Provider>
    );
}

const useSeasonContext = () => {
    const context = React.useContext(SeasonContext);

    if (!context) {
        throw new Error("Cannot use outside of SeasonContext provider");
    }

    return context;
};

// ==========

function Card({ children }) {
    return (
        <div className="card">
            <div className="card-content">{children}</div>
        </div>
    );
}

function App() {
    const { season, setSeason } = useSeasonContext();
    const isSummer = season === SeasonTypes.SUMMER;

    const handleSeasonChange = React.useCallback(
        () => setSeason(isSummer ? SeasonTypes.WINTER : SeasonTypes.SUMMER),
        [season]
    );

    return (
        <section className="section">
            <h1 className="title is-1">Season</h1>
            <button className="button" onClick={handleSeasonChange}>
                Change season
            </button>
            <hr />
            <Card>
                <p className="is-italic">{isSummer ? "SUMMER!!!" : "winter..."}</p>
            </Card>
        </section>
    );
}

// ==========

ReactDOM.createRoot(document.getElementById("app")).render(
    <SeasonProvider>
        <App />
    </SeasonProvider>
);