✨ (feat) add toast element

Implement the toast element belonging to heroUI into the project and perform testing by adding the toast registry into
the provider, then running it as an error handler during authentication.

features/oauth-callback/ui/LoadingProcess.tsx

@@ -1,10 +1,11 @@
 "use client";
 
 import React from "react";
-import { CircularProgress } from "@heroui/react";
+import { addToast, Button, CircularProgress, Link } from "@heroui/react";
 import { SendCallbackToServer } from "../lib/sendCallbackToServer";
 import { useParams } from "next/navigation";
 import { useRunOnce } from "@/shared/hooks/useRunOnce";
+import { routes } from "@/shared/config/routes";
 
 const LoadingProcess = () => {
   // Access the URL parameters
@@ -20,6 +21,21 @@ const LoadingProcess = () => {
       window.close();
     } catch (error) {
       console.log(error);
+      addToast({
+        title: "Oops, lost connection!",
+        description: "Check your internet and try again",
+        color: "danger",
+        timeout: 0,
+        endContent: (
+          <Button
+            size="sm"
+            variant="flat"
+            onPress={() => (window.location.href = routes.login)}
+          >
+            Reload
+          </Button>
+        ),
+      });
     }
   });
   return (

providers/HeroUIWrapper.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useEffect, useState } from "react";
-import { HeroUIProvider } from "@heroui/react";
+import { HeroUIProvider, ToastProvider } from "@heroui/react";
 import { ThemeProvider as NextThemesProvider } from "next-themes";
 import { useRouter } from "next/navigation";
 
@@ -17,6 +17,7 @@ const HeroUIWrapper = ({
 
   return (
     <HeroUIProvider navigate={router.push}>
+      <ToastProvider />
       {mounted ? (
         <NextThemesProvider attribute={"class"} defaultTheme="dark">
           <main>{children}</main>