Notice: rename Warn -> Notice and add composability

The Notice component can now act as a general indicator component,
exposing four types: "wait", "help", "warn", or "none". These types
display different icons and make this a much more reusable element.

We also render children passed to us, making this even more extendable.
In future, we may wish to extract all message props altogether as
children instead.

src/components/Notice/Notice.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { motion } from "framer-motion";
+import { useRecoilValue } from "recoil";
+
+import { isDarkThemeSelector } from "../../state/selectors";
+import { searchQueryAtom } from "../../state/atoms";
+import { HourglassMedium, Question, SmileyXEyes } from "phosphor-react";
+
+interface NoticeProps {
+  message?: string;
+  type?: "wait" | "help" | "warn" | "none";
+}
+
+const Notice: React.FC<NoticeProps> = ({ message, type = "warn", children }) => {
+  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 }}
+      >
+        {type === "wait" && (
+          <HourglassMedium size={128} color="#615C68" weight="duotone" />
+        )}
+        {type === "help" && (
+          <Question size={128} color="#615C68" weight="duotone" />
+        )}
+        {type === "warn" && (
+          <SmileyXEyes size={128} color="#615C68" weight="duotone" />
+        )}
+        {message ?? (
+          <p>
+            No results for "<code>{query}</code>"
+          </p>
+        )}
+        {children}
+      </motion.div>
+    </div>
+  );
+};
+
+export default Notice;