JSFiddle - React, Tailwind, and code Playground

by phsiao2000

HTML

<script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
<script src="http://react.zpao.com/builds/master/latest/react-with-addons.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

/** @jsx React.DOM */

var Hello = React.createClass({
    render: function() {
        return     <Tabbed>
      <Tab title="Live">
        <div>This is Liveee</div>
      </Tab>
      <Tab title="Vote">
        <div>This is voOOtte</div>
      </Tab>
      <Tab title="Infos">
        <div>This is Infoos</div>
      </Tab>
    </Tabbed>
    }
});

var Tab = React.createClass({
  render: function() {
    return <a href="" className="tab-item" onClick={this.props.onClick} style={{marginRight: '10px'}}>
          <i className="icon ion-arrow-graph-up-right"></i>
          {this.props.title}
        </a>
  }
})

var Tabbed = React.createClass({
  getInitialState: function() {
    return {currentTab: 1}
  },
  update: function(idx, e) {
    e.preventDefault()
    console.log(idx)
    this.setState({currentTab: idx})
  },
  render: function() {
    return <div>
      <div className="tabs tabs-icon-top custom-top">
        {this.props.children.map(function(c, idx) {
          return React.addons.cloneWithProps(c, {onClick: this.update.bind(this, idx)})
        }, this)}
      </div>
      {this.props.children[this.state.currentTab].props.children}
    </div>
  }
})
 
React.renderComponent(<Hello name="World" />, document.body);