IconGrid: extract empty state into Warn component

The empty state now renders a Warn component, which can be used to show
empty queries, or to show an arbitrary error message.

src/components/Warn/Warn.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { motion } from "framer-motion";
+import { useRecoilValue } from "recoil";
+
+import { isDarkThemeSelector } from "../../state/selectors";
+import { searchQueryAtom } from "../../state/atoms";
+import { Warning } from "phosphor-react";
+
+interface WarnProps {
+  message?: string;
+}
+
+const Warn: React.FC<WarnProps> = ({ message }) => {
+  const isDark = useRecoilValue(isDarkThemeSelector);
+  const query = useRecoilValue(searchQueryAtom);
+
+  return (
+    <div style={isDark ? { backgroundColor: "#35313D", color: "white" } : {}}>
+      <motion.div
+        className="empty-list"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.5 }}
+      >
+        <Warning size={128} color="currentColor" weight="fill" />
+        {message ?? (
+          <p>
+            No results for '<code>{query}</code>'
+          </p>
+        )}
+      </motion.div>
+    </div>
+  );
+};
+
+export default Warn;