IconGrid: add TagCloud on empty search

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 }}>