[FEAT]: created useToast component

package.json

@@ -46,6 +46,7 @@
     "react-circular-progressbar": "^2.0.4",
     "react-dom": "^18.1.0",
     "react-moment": "^1.1.2",
-    "react-router-dom": "^6.3.0"
+    "react-router-dom": "^6.3.0",
+    "react-toastify": "^9.0.1"
   }
 }

src/App.jsx

@@ -1,17 +1,31 @@
 import React from "react";
 import { Footer, Header } from "./components";
-import { useTheme } from "./context";
+import { useAuth, useTheme } from "./context";
+import { ToastContainer } from "react-toastify";
 
 import { WebsiteRoutes } from "./routes";
 
 const App = () => {
   const { theme } = useTheme();
+  const { authenticated } = useAuth();
 
   return (
     <div className={`${theme === "light" ? "bg-orange-200" : "bg-slate-900"}`}>
-      <Header />
+      <ToastContainer
+        theme={theme === "light" ? "light" : "dark"}
+        position="bottom-left"
+        autoClose={2000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick
+        rtl={false}
+        draggable
+        pauseOnHover
+      />
+
+      {authenticated && <Header />}
       <WebsiteRoutes />
-      <Footer />
+      {authenticated && <Footer />}
     </div>
   );
 };

src/hooks/useToast.js

@@ -0,0 +1,22 @@
+import { toast } from "react-toastify";
+
+const useToast = () => {
+  const showToast = (toastText, toastTheme) => {
+    const notify = () => {
+      toast[toastTheme](toastText, {
+        position: "top-right",
+        autoClose: 3000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+      });
+    };
+    notify();
+  };
+
+  return { showToast };
+};
+
+export { useToast };