From d7f5fae14ae36038e704a09014f649bd50aca0ad Mon Sep 17 00:00:00 2001
From: Brandon Egger <brandonegger64@gmail.com>
Date: Thu, 24 Aug 2023 10:13:05 -0500
Subject: [PATCH] add error notice component to resource page

---
 src/components/notice.tsx     | 44 +++++++++++++++++++++++------------
 src/pages/resources/index.tsx | 13 +++++++----
 2 files changed, 38 insertions(+), 19 deletions(-)

diff --git a/src/components/notice.tsx b/src/components/notice.tsx
index e0db851..5bd5d70 100644
--- a/src/components/notice.tsx
+++ b/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}) => {
-  return <>
-    {header ? (
-      <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 ? (
-          <div className="mx-auto grid place-items-center">
-            <ExclamationTriangleIcon className="w-10 h-10" />
-          </div>
-        ) : undefined}
-        <span className="text-lg font-semibold text-red-500">{header}</span>
-        {body ? (<p className="font-normal text-stone-600 text-sm mx-8 my-2">{body}</p>) : undefined}
-      </div>
-    ) : undefined}
+export const ErrorNotice = ({
+  header,
+  body,
+  icon,
+}: {
+  header?: string;
+  body?: string;
+  icon?: boolean;
+}) => {
+  return (
+    <>
+      {header ? (
+        <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}
     </>
-}
\ No newline at end of file
+  );
+};
diff --git a/src/pages/resources/index.tsx b/src/pages/resources/index.tsx
index dbcb3f9..b9bd55b 100644
--- a/src/pages/resources/index.tsx
+++ b/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">
-        <ErrorNotice icon header="Unable to pull available resources. Please try again."
-        body="If this issue persists, please contact a site administrator" />
+      return (
+        <div className="my-28">
+          <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);