Add carousel component

package.json

@@ -25,13 +25,15 @@
     "compression": "1.5.2",
     "express": "4.13.3",
     "lodash.defaults": "3.1.2",
-    "mustache": "2.1.3"
+    "mustache": "2.1.3",
+    "slick-carousel": "^1.5.8"
   },
   "devDependencies": {
     "autoprefixer-loader": "2.1.0",
     "css-loader": "0.17.0",
     "eslint": "1.3.1",
     "eslint-plugin-react": "3.3.1",
+    "file-loader": "^0.8.4",
     "json-loader": "0.5.2",
     "jsx-loader": "0.13.2",
     "node-sass": "3.3.2",
@@ -39,6 +41,7 @@
     "sass-loader": "2.0.1",
     "style-loader": "0.12.3",
     "tape": "4.2.0",
+    "url-loader": "^0.5.6",
     "watch": "0.16.0",
     "webpack": "1.12.0",
     "xhr": "2.0.4"

src/components/carousel/carousel.json

@@ -0,0 +1,50 @@
+[
+    {
+        "id": 1,
+        "type": "project",
+        "title": "Example Project",
+        "thumbnailUrl": "http://www.lorempixel.com/144/108/",
+        "creator": "raimondious",
+        "projectId": "1000"
+    },
+    {
+        "id": 2,
+        "type": "project",
+        "title": "Example Project",
+        "thumbnailUrl": "http://www.lorempixel.com/144/108/",
+        "creator": "raimondious",
+        "projectId": "1000"
+    },
+    {
+        "id": 3,
+        "type": "project",
+        "title": "Example Project",
+        "thumbnailUrl": "http://www.lorempixel.com/144/108/",
+        "creator": "raimondious",
+        "projectId": "1000"
+    },
+    {
+        "id": 4,
+        "type": "project",
+        "title": "Example Project",
+        "thumbnailUrl": "http://www.lorempixel.com/144/108/",
+        "creator": "raimondious",
+        "projectId": "1000"
+    },
+    {
+        "id": 5,
+        "type": "project",
+        "title": "Example Project",
+        "thumbnailUrl": "http://www.lorempixel.com/144/108/",
+        "creator": "raimondious",
+        "projectId": "1000"
+    },
+    {
+        "id": 6,
+        "type": "project",
+        "title": "Example Project",
+        "thumbnailUrl": "http://www.lorempixel.com/144/108/",
+        "creator": "raimondious",
+        "projectId": "1000"
+    }
+]

src/components/carousel/carousel.jsx

@@ -0,0 +1,42 @@
+var React = require('react');
+var Slider = require('react-slick');
+var Thumbnail = require('../thumbnail/thumbnail.jsx');
+
+require('slick-carousel/slick/slick.scss');
+require('slick-carousel/slick/slick-theme.scss');
+require('./carousel.scss');
+
+module.exports = React.createClass({
+    propTypes: {
+        items: React.PropTypes.array
+    },
+    getDefaultProps: function () {
+        return {
+            items: require('./carousel.json'),
+            settings: {
+                arrows: true,
+                dots: false,
+                infinite: false,
+                lazyLoad: true,
+                slidesToShow: 5,
+                slidesToScroll: 5,
+                variableWidth: true
+            }
+        };
+    },
+
+    render: function () {
+        return (
+            <Slider className="carousel" {... this.props.settings}>
+                {this.props.items.map(function(item) {
+                    return (
+                        <Thumbnail key={item.id}
+                                   href={'/projects/' + item.projectId + '/'}
+                                   title={item.title}
+                                   extra={'by ' + item.creator} />
+                    );
+                })}
+            </Slider>
+        );
+    }
+});

src/components/carousel/carousel.scss

@@ -0,0 +1,33 @@
+.carousel {
+    $icon-size: 40px;
+    $button-offset: $icon-size + 5px;
+
+    padding: 0 $button-offset;
+
+    .slick-next, .slick-prev {
+        width: $icon-size;
+        height: $icon-size;
+        margin-top: -$icon-size/2;
+        
+        &:before {
+            font-size: $icon-size;
+            color: #ddd;
+        }
+
+        &.slick-disabled:before{
+            opacity: 1;
+        }
+    }
+
+    .slick-prev {
+        left: 0;
+    }
+
+    .slick-next {
+        right: 0;
+    }
+
+    .slick-slide {
+        padding-right: 30px;
+    }
+}

src/components/thumbnail/thumbnail.jsx

@@ -0,0 +1,29 @@
+var React = require('react');
+
+require('./thumbnail.scss');
+
+module.exports = React.createClass({
+    propTypes: {
+        src: React.PropTypes.string
+    },
+    getDefaultProps: function () {
+        return {
+            href: '/projects/1000/',
+            title: 'Example Project',
+            src: 'http://www.lorempixel.com/144/108/',
+            extra: 'by raimondious'
+        };
+    },
+    render: function () {
+        var className = this.props.className + " thumbnail";
+        return (
+            <div className={className}>
+                <a className="thumbnailImage" href={this.props.href}>
+                    <img src={this.props.src} />
+                </a>
+                <span className="thumbnailTitle"><a href={this.props.href}>{this.props.title}</a></span>
+                <span className="thumbnailExtra">{this.props.extra}</span>
+            </div>
+        );
+    }
+});

src/components/thumbnail/thumbnail.scss

@@ -0,0 +1,33 @@
+.thumbnail {
+    .thumbnailImage,
+    .thumbnailTitle,
+    .thumbnailExtra {
+        display: block;
+    }
+
+    .thumbnailImage img {
+        margin-bottom: 2px;
+        border: 1px solid #ddd;
+    }
+
+    .thumbnailTitle,
+    .thumbnailExtra {
+        line-height: normal;
+        word-wrap: break-word;
+    }
+
+    .thumbnailTitle {
+        margin-bottom: 1px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        font-weight: 800;
+        font-size: .9230em;
+    }
+
+    .thumbnailExtra {
+        font-size: .8462em;
+        color: #666;
+    }
+
+}

webpack.config.js

@@ -36,7 +36,11 @@ module.exports = {
             },
             {
                 test: /\.scss$/,
-                loader: 'style!css!sass!autoprefixer-loader?browsers=last 3 versions'
+                loader: 'style!css!autoprefixer-loader?browsers=last 3 versions!sass'
+            },
+            {
+                test: /\.(png|jpg|gif|eot|svg|ttf|woff)$/,
+                loader: 'url-loader'
             }
         ]
     },