Tooling - part1

StephenGrider · Mar 21, 2015 · 3ac4d7c · 3ac4d7c
1 parent ee7157f
commit 3ac4d7c
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 0 deletions.
diff --git a/thumbnail-gulp/index.html b/thumbnail-gulp/index.html
@@ -0,0 +1,9 @@
+<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>
diff --git a/thumbnail-gulp/src/app.jsx b/thumbnail-gulp/src/app.jsx
@@ -0,0 +1,18 @@
+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'));
diff --git a/thumbnail-gulp/src/badge.jsx b/thumbnail-gulp/src/badge.jsx
@@ -0,0 +1,7 @@
+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>
+  }
+});
diff --git a/thumbnail-gulp/src/thumbnail-list.jsx b/thumbnail-gulp/src/thumbnail-list.jsx
@@ -0,0 +1,11 @@
+var ThumbnailList = React.createClass({
+  render: function() {
+    var list = this.props.thumbnailData.map(function(thumbnailProps){
+      return <Thumbnail {...thumbnailProps} />
+    });
+
+    return <div>
+      {list}
+    </div>
+  }
+});
diff --git a/thumbnail-gulp/src/thumbnail.jsx b/thumbnail-gulp/src/thumbnail.jsx
@@ -0,0 +1,16 @@
+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>
+  }
+});