/** @jsx React.DOM */

define(
  [
    'react',
    './Header.react',
    './Footer.react'
  ],
  function (React, Header, Footer) {

    return React.createClass({

      render: function () {

        var footer = (
          true ? <Footer/> : null
        );

        return (
          <div>
            <Header profile={this.props.profile} currentRoute={this.props.route}/>
            <div id="main">
              {this.props.content}
            </div>
            {footer}
          </div>
        );
      }

    });

  });

/** @jsx React.DOM */

define(
  [
    'react',
    'backbone',
    './Header.react',
    './Footer.react'
  ],
  function (React, Backbone, Header, Footer) {

    return React.createClass({

      propTypes: {
        profile: React.PropTypes.instanceOf(Backbone.Model).isRequired,
        currentRoute: React.PropTypes.oneOfType([
          React.PropTypes.string,
          React.PropTypes.array
        ])
      },

      render: function () {
        return (
          <div>
            <Header profile={this.props.profile} currentRoute={this.props.route}/>
            <div id="main">
              {this.props.content}
            </div>
            <Footer/>
          </div>
        );
      }

    });

  });

clean up root component