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/App/App.css

@@ -25,7 +25,6 @@ pre,
 code {
   font-family: "IBM Plex Mono", "Courier New", monospace;
   font-size: 14px;
-  color: "black";
 }
 
 pre {

src/components/App/App.tsx

@@ -6,7 +6,11 @@ import Toolbar from "../Toolbar/Toolbar";
 import IconGrid from "../IconGrid/IconGrid";
 import Footer from "../Footer/Footer";
 import ErrorBoundary from "../ErrorBoundary/ErrorBoundary";
-import Warn from "../Warn/Warn";
+import Notice from "../Notice/Notice";
+
+const errorFallback = <Notice message="Search error" />;
+// const waitingFallback = <Notice type="wait" message="Loading..." />;
+const waitingFallback = <Notice type="none" message="" />;
 
 const App: React.FC<any> = () => {
   return (
@@ -14,8 +18,8 @@ const App: React.FC<any> = () => {
       <Header />
       <main>
         <Toolbar />
-        <ErrorBoundary fallback={<Warn message="Search error"/>}>
-          <Suspense fallback={<div>Loading...</div>}>
+        <ErrorBoundary fallback={errorFallback}>
+          <Suspense fallback={waitingFallback}>
             <IconGrid />
           </Suspense>
         </ErrorBoundary>

src/components/Notice/Notice.tsx

@@ -4,13 +4,14 @@ import { useRecoilValue } from "recoil";
 
 import { isDarkThemeSelector } from "../../state/selectors";
 import { searchQueryAtom } from "../../state/atoms";
-import { SmileyXEyes } from "phosphor-react";
+import { HourglassMedium, Question, SmileyXEyes } from "phosphor-react";
 
-interface WarnProps {
+interface NoticeProps {
   message?: string;
+  type?: "wait" | "help" | "warn" | "none";
 }
 
-const Warn: React.FC<WarnProps> = ({ message }) => {
+const Notice: React.FC<NoticeProps> = ({ message, type = "warn", children }) => {
   const isDark = useRecoilValue(isDarkThemeSelector);
   const query = useRecoilValue(searchQueryAtom);
 
@@ -22,15 +23,24 @@ const Warn: React.FC<WarnProps> = ({ message }) => {
         animate={{ opacity: 1 }}
         transition={{ duration: 0.5 }}
       >
-        <SmileyXEyes size={128} color="#615C68" weight="duotone" />
+        {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 Warn;
+export default Notice;