Info block

app/scripts/app.jsx

@@ -14,7 +14,7 @@ var App = React.createClass({
 });
 
 var Menu = React.createClass({
-    mixins: [Router.Navigation, Router.State],
+    mixins: [Router.State],
     api_url: "/api/teams?org=",
 
     getInitialState: function() {
@@ -65,7 +65,7 @@ var Org = React.createClass({
 });
 
 var OrgStats = React.createClass({
-    mixins: [Router.Navigation, Router.State],
+    mixins: [Router.State],
     render: function(){
         return (
             <section className="content">
@@ -77,11 +77,15 @@ var OrgStats = React.createClass({
 });
 
 var TeamStats = React.createClass({
-    mixins: [Router.Navigation, Router.State],
+    mixins: [Router.State],
     render: function(){
         return (
             <section className="content">
-                <BarChart key={this.getParams().team} api="/api/stat/teams/top"
+                <InfoBlock key={"info-block-"+ this.getParams().team}
+                    image="https://media.licdn.com/mpr/mpr/p/8/005/058/14b/0088c48.jpg"
+                    title={this.getParams().team}
+                    text={"The most awesome team in "+ this.getParams().org} />
+                <BarChart key={"bar-chart"+ this.getParams().team} api="/api/stat/teams/top"
                     params={this.getParams()} items={["repo", "user"]} />
             </section>
         );
@@ -89,7 +93,7 @@ var TeamStats = React.createClass({
 });
 
 var UserStats = React.createClass({
-    mixins: [Router.Navigation, Router.State],
+    mixins: [Router.State],
     render: function(){
         return (
             <section className="content">
@@ -101,7 +105,7 @@ var UserStats = React.createClass({
 });
 
 var RepoStats = React.createClass({
-    mixins: [Router.Navigation, Router.State],
+    mixins: [Router.State],
     render: function(){
         return (
             <section className="content">
@@ -120,6 +124,19 @@ var NotFound = React.createClass({
     }
 });
 
+var InfoBlock = React.createClass({
+    render: function() {
+        var img = <div className="img" style={{backgroundImage: "url("+ this.props.image +")"}} />;
+        return (
+            <div className="info-block">
+                { this.props.image ? img : null }
+                <h1>{this.props.title}</h1>
+                <p>{this.props.text}</p>
+            </div>
+        )
+    }
+});
+
 var routes = [
         <Router.Route name="root" path="/app/" handler={App}>
             <Router.Route name="org" path=":org" handler={Org}>

app/styles/app.css

@@ -35,3 +35,30 @@ li.nav {
     float: left;
     width: 50%;
 }
+
+.info-block {
+    width: 100%;
+    height: 100px;
+    margin-bottom: 20px;
+}
+.info-block .img {
+    float: left;
+    width: 100px;
+    height: 100px;
+    background-position: center;
+    background-size: 100% auto;
+    margin-right: 20px;
+    border-radius: 3px;
+}
+
+.info-block h1 {
+    font-weight: 400;
+}
+
+.info-block p {
+    max-width: 100%;
+    margin-right: 20px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}