import 'antd/dist/antd.css'
import 'common/index.scss'

import React from 'react'
import { Route, Link, Switch } from 'react-router-dom'
import { hot } from 'react-hot-loader'
import { Layout } from 'antd'

import routes from 'routes'

import Topbar from 'common/Topbar'
import Sidebar from 'common/Sidebar'

const { Content, Sider } = Layout

function App () {
  return (
    <Layout className="layout">
        <Topbar></Topbar>
        <Layout className="main">
            <Sider style={{background: '#fff'}}>
                <Sidebar></Sidebar>
            </Sider>
            <Layout style={{padding: '24px'}}>
                <Content style={{padding: '24px', background: '#fff'}}>
                    <Switch>
                        {routes.map((route, index) => {
                            return <Route {...route} key={index + ''}/>
                        })}
                    </Switch>
                </Content>
            </Layout>
        </Layout>
    </Layout>
  )
}

export default hot(module)(App)