{"size": 1067, "ext": "js", "max_stars_repo_path": "src/js/TabList.js", "max_stars_repo_name": "brendanmoore/wrreed-boilerplate", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/js/TabList.js", "max_issues_repo_name": "brendanmoore/wrreed-boilerplate", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/js/TabList.js", "max_forks_repo_name": "brendanmoore/wrreed-boilerplate", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 30.4857142857, "max_line_length": 90, "alphanum_fraction": 0.4526710403}
var React = require('react'),
    List = require('./List');

var TabList = React.createClass({
    render: function(){
        var lists = this.props.lists,
            tabs = lists.map(function(list, i){
                return <a className={"tab " + (this.state.selected === i ? 'active' : '')}
                          onClick={this.selectTab.bind(this, i)}>
                        <span className="count">{list.items.length}</span>
                        <span className="caption">{list.title.toUpperCase()}</span>
                      </a>;
            }, this),
            items = lists[this.state.selected].items;

        return  <div className="tablist-container">
                    <nav className="tabs">
                      {tabs}
                    </nav>
                    <List items={items} />
                </div>;
    },
    getInitialState: function(){
        return {
            selected: 0
        };
    },
    selectTab: function(i){
        this.setState({
            selected: i
        });
    }
});

module.exports = TabList;