More robust error handling & Display errors to user

www/app/(errors)/errorContext.tsx

@@ -0,0 +1,31 @@
+"use client";
+import React, { createContext, useContext, useState } from "react";
+
+interface ErrorContextProps {
+  error: string;
+  setError: React.Dispatch<React.SetStateAction<string>>;
+}
+
+const ErrorContext = createContext<ErrorContextProps | undefined>(undefined);
+
+export const useError = () => {
+  const context = useContext(ErrorContext);
+  if (!context) {
+    throw new Error("useError must be used within an ErrorProvider");
+  }
+  return context;
+};
+
+interface ErrorProviderProps {
+  children: React.ReactNode;
+}
+
+export const ErrorProvider: React.FC<ErrorProviderProps> = ({ children }) => {
+  const [error, setError] = useState<string>("");
+
+  return (
+    <ErrorContext.Provider value={{ error, setError }}>
+      {children}
+    </ErrorContext.Provider>
+  );
+};

www/app/(errors)/errorMessage.tsx

@@ -0,0 +1,29 @@
+"use client";
+import { useError } from "./errorContext";
+import { useEffect, useState } from "react";
+
+const ErrorMessage: React.FC = () => {
+  const { error, setError } = useError();
+  const [isVisible, setIsVisible] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (error) setIsVisible(true);
+  }, [error]);
+
+  if (!isVisible || !error) return null;
+
+  return (
+    <div
+      onClick={() => {
+        setIsVisible(false);
+        setError("");
+      }}
+      className="max-w-xs z-50 fixed top-16 right-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded transition-opacity duration-300 ease-out opacity-100 hover:opacity-75 cursor-pointer transform hover:scale-105"
+      role="alert"
+    >
+      <span className="block sm:inline">{error}</span>
+    </div>
+  );
+};
+
+export default ErrorMessage;