Sandbox::https://github.com/splincodewd/collection-codework/blob/master/javascript/hexlet/tabs/src/App.jsx

Repository navigation

import React from 'react';

import { Tabs, Tab } from 'react-bootstrap';

import Home from './Home.jsx';

import Profile from './Profile.jsx';

import ThemeSwitcher from './ThemeSwitcher.jsx';

import ThemeContext from './contexts';

const themes = [

{

id: 1,

className: 'light',

{

id: 2,

className: 'dark',

{

id: 3,

className: 'dark-blue',

];

class App extends React.Component {

static contextType = ThemeContext;

constructor() {

super();

this.state = { currentTheme: themes[0] };

}

setTheme = (theme) => {

this.setState({ currentTheme: theme });

}

render() {

return (

<ThemeContext.Provider value={{ themes: themes, theme: this.state.currentTheme, setTheme: this.setTheme }}>

<Tabs>

<Home/>

</Tab>

</Tab>

</Tabs>

</div>

</ThemeContext.Provider>

);

}

export default App;