You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
49 lines
1.1 KiB
49 lines
1.1 KiB
import React from 'react'; |
|
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; |
|
import './Style-light.css'; |
|
import './Style-dark.css'; |
|
import Feed from './Feed.js'; |
|
import Article from './Article.js'; |
|
import Comments from './Comments.js'; |
|
|
|
class App extends React.Component { |
|
constructor(props) { |
|
super(props); |
|
|
|
this.state = { |
|
theme: localStorage.getItem('theme') || '', |
|
}; |
|
} |
|
|
|
light() { |
|
this.setState({ theme: '' }); |
|
localStorage.setItem('theme', ''); |
|
} |
|
|
|
dark() { |
|
this.setState({ theme: 'dark' }); |
|
localStorage.setItem('theme', 'dark'); |
|
} |
|
|
|
render() { |
|
const theme = this.state.theme; |
|
|
|
return ( |
|
<div className={theme}> |
|
<Router> |
|
<div className='container menu'> |
|
<p> |
|
<Link to='/'>QNN - Home</Link> |
|
<span className='theme'>Theme: <a href='#' onClick={() => this.light()}>Light</a> - <a href='#' onClick={() => this.dark()}>Dark</a></span> |
|
</p> |
|
</div> |
|
<Route path='/' exact component={Feed} /> |
|
<Route path='/:id' exact component={Comments} /> |
|
<Route path='/:id/a' exact component={Article} /> |
|
</Router> |
|
</div> |
|
); |
|
} |
|
} |
|
|
|
export default App;
|
|
|