IconGrid: add TagCloud on empty search

src/components/IconGrid/IconGrid.css

@@ -25,11 +25,11 @@
   -moz-user-select: none;
   -webkit-user-select: none;
   cursor: pointer;
+  /* transition: background-color 100ms ease; */
 }
 
 .grid-item:hover {
   background-color: rgba(163, 159, 171, 0.1); 
-  transition: background-color 0.2s;
 }
 
 .grid-item:focus {
@@ -170,6 +170,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  margin-bottom: 0;
 }
 
 .beacon {

src/components/IconGrid/IconGrid.tsx

@@ -10,9 +10,12 @@ import {
 } from "../../state/selectors";
 import useGridSpans from "../../hooks/useGridSpans";
 import IconGridItem from "./IconGridItem";
-import Warn from "../Warn/Warn";
+import TagCloud from "./TagCloud";
+import Notice from "../Notice/Notice";
 import "./IconGrid.css";
 
+const defaultSearchTags = ["communication", "design", "editor", "emoji", "maps", "media", "weather"];
+
 type IconGridProps = {};
 
 const IconGrid: React.FC<IconGridProps> = () => {
@@ -31,7 +34,13 @@ const IconGrid: React.FC<IconGridProps> = () => {
     controls.start("visible");
   }, [controls, filteredQueryResults]);
 
-  if (!filteredQueryResults.length) return <Warn />;
+  if (!filteredQueryResults.length)
+    return (
+      <Notice>
+        Try searching a category or keyword:
+        <TagCloud name="empty-state" isDark={isDark} tags={defaultSearchTags} />
+      </Notice>
+    );
 
   return (
     <IconContext.Provider value={{ weight, size, color, mirrored: false }}>