fix: centered error message (#170)

src/components/Error/Error.jsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 import ErrorCard from "./ErrorCard";
 import { errors } from "../../data/error.json";
-import { Toaster } from 'react-hot-toast';
+import { Toaster } from "react-hot-toast";
 
 const Error = ({ search, type }) => {
   const [error, setError] = useState([]);
@@ -20,8 +20,8 @@ const Error = ({ search, type }) => {
   const filteredErrorByType = filteredError.filter((error) => {
     if (type === "All") {
       return error;
-    } return error.type.toLowerCase().includes(type.toLowerCase());
-
+    }
+    return error.type.toLowerCase().includes(type.toLowerCase());
   });
 
   return (
@@ -31,21 +31,25 @@ const Error = ({ search, type }) => {
           position="top-right"
           toastOptions={{
             success: {
-            theme: {
-              primary: '#4aed88',
-            },
+              theme: {
+                primary: "#4aed88",
+              },
             },
           }}
         ></Toaster>
       </div>
-      <section className="mx-4 md:w-5/6 my-12 grid grid-cols-12 justify-center gap-8 md:mx-auto">
+      <section className="mx-4 md:w-5/6 my-12 grid grid-cols-12 justify-center gap-8 md:mx-auto ">
         {filteredErrorByType.length === 0 ? (
-          <h1 className="text-center text-2xl text-gray-500">No Error Found</h1>
-          ) : (
-            filteredErrorByType.map((error, idx) => (
-              <ErrorCard key={idx} error={error} />
-              ))
-              )}
+          <div className="col-span-12">
+            <h1 className="text-center text-2xl text-gray-500 mx-auto">
+              No Error Found
+            </h1>
+          </div>
+        ) : (
+          filteredErrorByType.map((error, idx) => (
+            <ErrorCard key={idx} error={error} />
+          ))
+        )}
       </section>
     </>
   );