{"size": 1143, "ext": "js", "max_stars_repo_path": "examples/context/theme-detailed-app.js", "max_stars_repo_name": "mehdiyev/az.reactjs.org", "max_stars_repo_stars_event_min_datetime": "2019-02-08T03:08:32.000Z", "max_stars_repo_stars_event_max_datetime": "2022-01-04T14:20:23.000Z", "max_issues_repo_path": "examples/context/theme-detailed-app.js", "max_issues_repo_name": "mehdiyev/az.reactjs.org", "max_issues_repo_issues_event_min_datetime": "2019-02-07T23:36:41.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-08T23:30:35.000Z", "max_forks_repo_path": "examples/context/theme-detailed-app.js", "max_forks_repo_name": "mehdiyev/az.reactjs.org", "max_forks_repo_forks_event_min_datetime": "2019-02-08T13:15:08.000Z", "max_forks_repo_forks_event_max_datetime": "2022-02-28T16:07:49.000Z"}
{"max_stars_count": 40, "max_issues_count": 262, "max_forks_count": 27, "avg_line_length": 22.86, "max_line_length": 70, "alphanum_fraction": 0.5984251969}
import {ThemeContext, themes} from './theme-context';
import ThemedButton from './themed-button';

// ThemedButton-dan istifadə edən ara komponent
function Toolbar(props) {
  return (
    <ThemedButton onClick={props.changeTheme}>
      Change Theme
    </ThemedButton>
  );
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      theme: themes.light,
    };

    this.toggleTheme = () => {
      this.setState(state => ({
        theme:
          state.theme === themes.dark
            ? themes.light
            : themes.dark,
      }));
    };
  }

  render() {
    //highlight-range{1-3}
    // ThemeProvider-də olan ThemedButton düyməsi
    // state-də olan şablondan istifadə edərkən, xaricindəki komponent
    // default olan dark şablondan istifadə edir
    //highlight-range{3-5,7}
    return (
      <Page>
        <ThemeContext.Provider value={this.state.theme}>
          <Toolbar changeTheme={this.toggleTheme} />
        </ThemeContext.Provider>
        <Section>
          <ThemedButton />
        </Section>
      </Page>
    );
  }
}

ReactDOM.render(<App />, document.root);
