Adding the emptycard component

src/components/Shared/EmptyCard/EmptyCard.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const EmptyCard = props => {
+  return (
+    <div className="empty-card">
+      <h4 className="card-message">
+        Uh, oh it seems there is not much to show here.
+      </h4>
+      <button>Add {props.itemName}</button>
+    </div>
+  )
+}
+
+EmptyCard.propTypes = {
+  itemName: PropTypes.string.isRequired
+}
+
+export default EmptyCard

src/components/Shared/EmptyCard/EmptyCard.scss

@@ -0,0 +1,20 @@
+.empty-card {
+  width: 100%;
+  padding: $padding-s;
+  color: $primary-color-white;
+  text-align: center;
+  background-color: $primary-color-darkblue-lighter;
+  margin-bottom: $margin-r;
+  border: 2px dashed rgba($primary-color-white, 0.6);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 300px;
+}
+
+@media only screen and (min-width: 576px) {
+  .empty-card {
+    width: 48%;
+    max-width: 400px;
+  }
+}

src/components/Shared/EmptyCard/EmptyCard.test.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import EmptyCard from './EmptyCard'
+
+import { shallow } from 'enzyme'
+
+describe('<EmptyCard />', () => {
+  let emptyCardWrapper
+
+  let props = {
+    itemName: 'Artist'
+  }
+
+  beforeEach(() => {
+    emptyCardWrapper = shallow(<EmptyCard {...props} />)
+  })
+
+  it('contains a headline that raise awareness of missing information', () => {
+    expect(emptyCardWrapper.find('h4.card-message').text()).toEqual(
+      'Uh, oh it seems there is not much to show here.'
+    )
+  })
+
+  it('contains the button which enables to create one item', () => {
+    expect(emptyCardWrapper.find('button').length).toEqual(1)
+  })
+
+  it('contains the button with the label of the missing item', () => {
+    expect(emptyCardWrapper.find('button').text()).toEqual('Add Artist')
+  })
+})

src/containers/Artists/ExploreArtists/ExploreArtists.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import ArtistCard from '../../../components/Artists/ArtistCard/ArtistCard'
 import Paginate from '../../../components/Paginate/Paginate'
+
 class ExploreArtists extends Component {
   render() {
     return (

src/containers/Causes/CampaignsEndingSoon/CampaignsEndingSoon.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import { NavLink } from 'react-router-dom'
 import CauseCard from '../../../components/Causes/CauseCard/CauseCard'
+import EmptyCard from '../../../components/Shared/EmptyCard/EmptyCard'
 
 class CampaignsEndingSoon extends Component {
   render() {
@@ -24,6 +25,7 @@ class CampaignsEndingSoon extends Component {
             daysToGo={45}
             organization="UNICEF"
           />
+          <EmptyCard itemName="Cause" />
         </div>
         <NavLink activeClassName="nav__item--selected" to="/causes?q=ending">
           See all ending causes

src/main.scss

@@ -33,6 +33,7 @@
 @import "components/Shared/Banner/Banner.scss";
 @import "components/Shared/Loader/Loader.scss";
 @import "components/Shared/Alert/Alert.scss";
+@import "components/Shared/EmptyCard/EmptyCard.scss";
 @import "containers/Cause/SupportingArtists/SupportingArtists.scss";
 @import "containers/Cause/RelatedCauses/RelatedCauses.scss";
 @import "containers/Cause/RecentDonors/RecentDonors.scss";