Add empty search results component

src/zilker/CardSection.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import _ from 'lodash';
 
+import EmptySearchResults from "../zilker/EmptySearchResults";
 import GoalCardsGroup from "../zilker/GoalCardsGroup"
 import ProjectCard from "../zilker/ProjectCard"
 
@@ -10,12 +11,16 @@ class CardSection extends Component {
 
   render() {
     const { cards, type } = this.props
+    const foundProjects = type === 'project' && cards && !!cards.length;
 
     return (
       <section className="coa-CardSection usa-section usa-grid coa-flex-container coa-flex-wrap">
         <div className="row around-xs">
           {
-            (type === "project") && cards.map((card) => {
+            !foundProjects && <EmptySearchResults />
+          }
+          {
+            foundProjects && cards.map((card) => {
               return <ProjectCard {...card.node} />
             })
           }

src/zilker/EmptySearchResults.js

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import _ from 'lodash';
+
+import Search from '../zilker/Search';
+
+class EmptySearchResults extends Component {
+
+  render() {
+    const { cards, type } = this.props
+
+    return (
+      <section className="coa-EmptySearchResults">
+        <div>
+          No Results Found. Try another search or <a href="/projects">explore</a> current projects.
+        </div>
+      </section>
+    );
+  }
+
+}
+
+export default EmptySearchResults;