add error notice component to resource page

src/components/notice.tsx

@@ -1,17 +1,31 @@
-import { ExclamationTriangleIcon } from "@heroicons/react/24/outline"
+import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 
-export const ErrorNotice = ({header, body, icon}: {header?: string, body?: string, icon?: boolean}) => {
+export const ErrorNotice = ({
-  return <>
+  header,
-    {header ? (
+  body,
-      <div className="rounded-xl mx-auto w-fit px-4 py-4 bg-red-100 border-red-300 border text-center font-semibold text-red-600">
+  icon,
-        {icon ? (
+}: {
-          <div className="mx-auto grid place-items-center">
+  header?: string;
-            <ExclamationTriangleIcon className="w-10 h-10" />
+  body?: string;
-          </div>
+  icon?: boolean;
-        ) : undefined}
+}) => {
-        <span className="text-lg font-semibold text-red-500">{header}</span>
+  return (
-        {body ? (<p className="font-normal text-stone-600 text-sm mx-8 my-2">{body}</p>) : undefined}
+    <>
-      </div>
+      {header ? (
-    ) : undefined}
+        <div className="mx-auto w-fit rounded-xl border border-red-300 bg-red-100 px-4 py-4 text-center font-semibold text-red-600">
+          {icon ? (
+            <div className="mx-auto grid place-items-center">
+              <ExclamationTriangleIcon className="h-10 w-10" />
+            </div>
+          ) : undefined}
+          <span className="text-lg font-semibold text-red-500">{header}</span>
+          {body ? (
+            <p className="mx-8 my-2 text-sm font-normal text-stone-600">
+              {body}
+            </p>
+          ) : undefined}
+        </div>
+      ) : undefined}
     </>
-}
+  );
+};

src/pages/resources/index.tsx

@@ -35,12 +35,17 @@ const Resources = () => {
     if (resourceQuery.isLoading) {
       return <LoadingBarChart width={200} height={200} />;
     }
-    
+
     if (!resourceQuery.data || resourceQuery.isError) {
-      return <div className="my-28">
+      return (
-        <ErrorNotice icon header="Unable to pull available resources. Please try again."
+        <div className="my-28">
-        body="If this issue persists, please contact a site administrator" />
+          <ErrorNotice
+            icon
+            header="Unable to pull available resources. Please try again."
+            body="If this issue persists, please contact a site administrator"
+          />
         </div>
+      );
     }
 
     const totalPages = Math.ceil(resourceQuery.data.count / queryData.perPage);