var React = require('react/addons');
var Router = require('react-router');
var RouteHandler = Router.RouteHandler;
var DigH5 = require("../../../libs/dig-h5/DigH5.jsx");
var Tabs = DigH5.Tabs;
var Tab = DigH5.Tab;
var HomeFeature = DigH5.HomeFeature;

var Home = React.createClass({

  propTypes: {
    menuItems: React.PropTypes.array
  },

  render: function() {
    var style = {
        width: 270,
        height: 300,
        marginLeft: 30,
        marginRight: 30
    }
    return (
      <div>
        <div className='tabs-examples'>
          <Tabs onChange={this._onChange} tabWidth={100} leftPadding={50} zDepth={1}>
            <Tab label='应用' >
            <div>
                <div className="full-width-section home-features">
                  <div className="feature-container full-width-section-content">
                    <HomeFeature heading="Get Started" route="data" img="images/get-started.svg"/>
                    <HomeFeature heading="CSS Framework" route="data" img="images/css-framework.svg"/>
                    <HomeFeature heading="Components" route="data" img="images/components.svg"/>
                    <HomeFeature heading="Get Started" route="home" img="images/get-started.svg"/>
                    <HomeFeature heading="CSS Framework" route="home" img="images/css-framework.svg" />
                    <HomeFeature heading="Components" route="home" img="images/components.svg"/>
                  </div>
                </div>
             </div>
            </Tab>
            <Tab label='数据图表' >
              <div className='tab-template-container'>
              </div>
            </Tab>
            <Tab
              label='分析'
              route='home'
              onActive={this._onActive} />
          </Tabs>
        </div>
      </div>
    );
  }
  
});

module.exports = Home;