Flux - 33 - CSS Animations

imgur-client/sass/topic.scss

@@ -1,3 +1,16 @@
 .topic {
   text-align: center;
+
+  .image-preview {
+    animation: fadein .65s ease-out;
+
+    @keyframes fadein {
+      0% {
+        opacity: 0;
+      }
+      100% {
+        opacity: 1.0;
+      }
+    }
+  }
 }

imgur-client/src/components/comment-box.jsx

@@ -2,9 +2,17 @@ var React = require('react');
 
 module.exports = React.createClass({
   render: function(){
-    return <div>
-      I am a comment box.
-      {this.props.comments}
-    </div>
+    return <ul className="list-group">
+      {this.renderComments()}
+    </ul>
+  },
+  renderComments: function() {
+    return this.props.comments.slice(0, 20).map(function(comment){
+      return <li className="list-group-item comment-box" key={comment.id}>
+        <span className="badge">{comment.ups}</span>
+        <h5>{comment.author}</h5>
+        {comment.comment}
+      </li>
+    })
   }
 });