import React from 'react'
import ListItem from './components/List/ListItem';
import Login from './components/Login/Login';
import LabelImage from './components/LabelImg/LabelImage';
import SearchImage from './components/SearchImg/SearchImage';
import Role from './components/Role/Role';
import User from './components/User/User';
import ImportImage from './components/ImportImg/ImportImage';
import Test from './components/Test/Test';
import MenuBar from './components/layouts/MenuBar'
import Header from './components/layouts/Header'
import Footer from './components/layouts/Footer'
import 'antd/dist/antd.css';
import "./App.css";
import { Provider } from 'react-redux';
import store from './store';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';


function App() {
  return (
    <Provider store={store}>
      <Router>
        <Switch>
          <Route path="/login" exact render={() => <Login />} />
          <div className="m-grid m-grid--hor m-grid--root m-page">
            <Header />
            <MenuBar />
            <div>
              <Route exact path='/' component={SearchImage} />
              <Route path='/import-image' component={ImportImage} />
              <Route path='/user' component={User} />
              <Route path='/role' component={Role} />
              <Route path='/search-image' component={SearchImage} />
              <Route path='/label-image' component={LabelImage} />
              <Route path='/test' component={Test} />
              <Route path="/list-famous" component={ListItem} />
            </div>
            {/* <Footer/> */}
          </div>
        </Switch>
      </Router>
    </Provider>
  );
}

export default App;