import React from 'react';
import ReactDOM from 'react-dom';
import Shell from '..';
import { Icon, Nav } from '../..';

const { Item, SubNav } = Nav;

class App extends React.Component {
  render() {
    return (
      <div>
        <Shell className={'iframe-hack'} style={{ border: '1px solid #eee' }}>
          <Shell.Branding>
            <div className="rectangular"></div>
            <span style={{ marginLeft: 10 }}>App Name</span>
          </Shell.Branding>
          <Shell.Navigation direction="hoz" align="left">
            <Nav
              direction="hoz"
              type="secondary"
              triggerType="hover"
            >
              <Item key="item_1">产品类目一</Item>
              <Item key="item_2">产品类目二</Item>
              <Item key="item_3">产品类目三</Item>
              <Item key="item_4">产品类目四</Item>
              <Item key="item_5">产品类目五</Item>
              {/* @ts-ignore */}
              <SubNav label="产品类目六" noIcon>
                <Item key="item_a">选项A</Item>
                <Item key="item_b">选项B</Item>
                <Item key="item_c">选项C</Item>
                <Item key="item_d">选项D</Item>
              </SubNav>
            </Nav>
          </Shell.Navigation>
          <Shell.Action>
            <Icon type="ic_tongzhi" />
            <img
              src="https://img.alicdn.com/tfs/TB1.ZBecq67gK0jSZFHXXa9jVXa-904-826.png"
              className="avatar"
              alt="用户头像"
            />
            <span style={{ marginLeft: 10 }}>MyName</span>
          </Shell.Action>

          <Shell.Content>
            <div style={{ minHeight: 1200, background: '#fff' }}></div>
          </Shell.Content>

          <Shell.Footer>
            <span>Alibaba Fusion</span>
            <span>@ 2019 Alibaba Piecework 版权所有</span>
          </Shell.Footer>
        </Shell>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('shell-demo-1'));