Lists - thumbnailList

StephenGrider · Mar 20, 2015 · ee7157f · ee7157f
1 parent 5693d3c
commit ee7157f
Showing 1 changed file with 67 additions and 0 deletions.
diff --git a/thumbnail-list/index.html b/thumbnail-list/index.html
@@ -0,0 +1,67 @@
+<head>
+  <script src="http://fb.me/react-0.13.0.js"></script>
+  <script src="http://fb.me/JSXTransformer-0.13.0.js"></script>
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
+</head>
+<body>
+  <div class="container">
+  </div>
+</body>
+
+<script type="text/jsx">
+  var Badge = React.createClass({
+    render: function() {
+      return <button className="btn btn-primary" type="button">
+        {this.props.title} <span className="badge">{this.props.number}</span>
+      </button>
+    }
+  });
+
+  var Thumbnail = React.createClass({
+    render: function() {
+      return <div className="col-sm-6 col-md-4">
+        <div className="thumbnail">
+          <img src={this.props.imageUrl} alt="..."></img>
+          <div className="caption">
+            <h3>{this.props.header}</h3>
+            <p>{this.props.description}</p>
+            <p>
+              <Badge title={this.props.title} number={this.props.number} />
+            </p>
+          </div>
+        </div>
+      </div>
+    }
+  });
+
+  var ThumbnailList = React.createClass({
+    render: function() {
+      var list = this.props.thumbnailData.map(function(thumbnailProps){
+        return <Thumbnail {...thumbnailProps} />
+      });
+
+      return <div>
+        {list}
+      </div>
+    }
+  });
+
+  var options = {
+    thumbnailData:  [{
+      title: 'Show Courses',
+      number: 12,
+      header: 'Learn React',
+      description: 'React is a fantastic new front end library for rendering web pages. React is a fantastic new front end library for rendering web pages.',
+      imageUrl: 'https://raw.githubusercontent.com/wiki/facebook/react/react-logo-1000-transparent.png'
+    },{
+      title: 'Show Courses',
+      number: 25,
+      header: 'Learn Gulp',
+      description: 'Gulp will speed up your development workflow.  Gulp will speed up your development workflow.  Gulp will speed up your development workflow.',
+      imageUrl: 'http://brunch.io/images/others/gulp.png'
+    }]
+  };
+
+  var element = React.createElement(ThumbnailList, options);
+  React.render(element, document.querySelector('.container'));
+</script>