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 Loadable from 'react-loadable'
import { Layout } from 'antd'

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

const { Content, Sider } = Layout

function NoMatch() {
    return <div>
        Yoho Node.js 持续集成平台
    </div>
}

function Loading() {
    return <div>
        Loading
    </div>
}

const HotKeywords = Loadable({
  loader: () => import('./pages/seo/HotKeywords'),
  loading: Loading
})

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>
                        <Route exact path="/seo/hot-keyword" component={HotKeywords}/>
                        <Route component={NoMatch}/>
                    </Switch>
                </Content>
            </Layout>
        </Layout>
    </Layout>
  )
}

export default hot(module)(App)