diff --git a/client/src/componetnts/Notification.jsx b/client/src/componetnts/Notification.jsx
new file mode 100644
index 0000000..f9cfdee
--- /dev/null
+++ b/client/src/componetnts/Notification.jsx
@@ -0,0 +1,36 @@
+// Notification.js
+
+import React, { useState, useEffect } from "react";
+
+const Notification = ({ message, duration, onClose }) => {
+ const [isVisible, setIsVisible] = useState(true);
+ const [timer, setTimer] = useState(duration);
+
+ useEffect(() => {
+ const interval = setInterval(() => {
+ setTimer((prevTimer) => {
+ if (prevTimer === 1) {
+ clearInterval(interval);
+ setIsVisible(false);
+ onClose();
+ }
+ return prevTimer - 1;
+ });
+ }, 1000);
+
+ return () => clearInterval(interval);
+ }, [duration, onClose]);
+
+ return (
+ <>
+ {isVisible && (
+
+
{message}
+
{`${timer} seconds`}
+
+ )}
+ >
+ );
+};
+
+export default Notification;
diff --git a/client/src/pages/Booking.jsx b/client/src/pages/Booking.jsx
index 1cd0bc6..6883f2b 100644
--- a/client/src/pages/Booking.jsx
+++ b/client/src/pages/Booking.jsx
@@ -2,11 +2,17 @@ import React, { useState, useEffect } from "react";
import Loading from "../componetnts/Loading";
import bgimg2 from "../assests/2.jpg";
import NoRideAvailable from "./NoRIdeAvailable";
-import { message } from "antd";
+// import { message } from "antd";
+import Notification from "../componetnts/Notification";
const Booking = ({ showUi }) => {
const [isLoading, setIsLoading] = useState(true);
const [isHovered, setIsHovered] = useState(false);
const [imageLoaded, setImageLoaded] = useState(false);
+ const [notification, setNotification] = useState({
+ message: "",
+ duration: 10,
+ isVisible: false,
+ });
const containerStyle = {
backgroundColor: "#0A192F", // Background color
};
@@ -43,9 +49,19 @@ const Booking = ({ showUi }) => {
}, 2000); // Adjust the delay as needed
return () => clearTimeout(loadingTimeout);
}, []);
+ // Notification
+ const showNotification = (message, duration = 10) => {
+ setNotification({ message, duration, isVisible: true });
+ const timer = setTimeout(() => {
+ setNotification({ ...notification, isVisible: false });
+ }, duration * 1000);
+
+ return () => clearTimeout(timer);
+ };
+ // google login invoke
const googleLogin = async () => {
- message.success("Please Wait! This may take few seconds");
+ showNotification("Please Wait! This may take a few seconds");
window.open(`${process.env.REACT_APP_SECRETROUTE}/auth/google`, "_self");
};
@@ -100,6 +116,13 @@ const Booking = ({ showUi }) => {
)}
>
)}
+ {notification.isVisible && (
+ setNotification({ ...notification, isVisible: false })}
+ />
+ )}
>
);
};