import React, { Component } from "react";
import { Route, Switch } from "react-router-dom";

import Navbar from "./Navbar";
import Footer from "./Footer";
import Home from "./Home";
import About from "./About";
import Topics from "./Topics";

class App extends Component {
  render() {
    return (
      <div>
        <Navbar />
        <div style={{ display: "flex", minHeight: "calc(100vh - 1px)", flexDirection: "column" }}>
          <div style={{ flex: "1" }}>
            <Switch>
              <Route exact path="/" component={Home} />
              <Route path="/about" component={About} />
              <Route path="/topics" component={Topics} />
            </Switch>
          </div>
          <Footer />
        </div>
      </div>
    );
  }
}

export default App;