Initial version

src/components/CategoryCard/categorycard.css

@@ -0,0 +1,25 @@
+.category-card {
+    width: 200px;
+    height: 80px;
+    margin: 12px;
+    margin-top: 0;
+    padding: 8px;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
+    border-radius: 4px;
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.category-card-left {
+    width: 80px;
+}
+
+.category-card-right {
+    width: 120px;
+}
+
+.category-card-image {
+    width: 100%;
+    height: 100%;
+}

src/components/CategoryCard/categorycard.js

@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+
+import './categorycard.css';
+
+function toTitleCase(str) {
+    str = str.toLowerCase().split(' ');
+    for (var i = 0; i < str.length; i++) {
+        str[i] = str[i].charAt(0).toUpperCase() + str[i].slice(1);
+    }
+    return str.join(' ');
+}
+
+export default function CategoryCard(props) {
+    return (
+        <div className="category-card" >
+            <div className="category-card-left">
+                <img className="category-card-image" src={props.data.image} alt={props.data.name} />
+            </div>
+            <div className="category-card-right">
+                <div className="category-card-title">
+                    {
+                        toTitleCase(props.data.name)
+                    }
+                </div>
+                <div className="category-card-subtitle">
+                    {
+                        `${props.data.restaurants} Resturants`
+                    }
+                </div>
+            </div>
+        </div>
+    )
+}

src/components/CategoryCard/index.js

@@ -0,0 +1,3 @@
+import CategoryCard from './categorycard';
+
+export default CategoryCard;