Update 5th

1 files changed, 41 insertions, 0 deletions

diff --git a/pages/lib/useNotify.js b/pages/lib/useNotify.js
new file mode 100644
index 0000000..e6ba7e6
--- /dev/null
+++ b/pages/lib/useNotify.js
@@ -0,0 +1,41 @@
+import { useState, useCallback } from "react";
+import { motion as m, AnimatePresence } from "framer-motion";
+
+export const useNotification = () => {
+  const [showNotification, setShowNotification] = useState(false);
+  const [notificationMessage, setNotificationMessage] = useState("");
+
+  const show = useCallback(
+    (message) => {
+      setNotificationMessage(message);
+      setShowNotification(true);
+      setTimeout(() => {
+        setShowNotification(false);
+      }, 5000);
+    },
+    [setNotificationMessage, setShowNotification]
+  );
+
+  const NotificationComponent = () => {
+    return (
+      <AnimatePresence>
+        {showNotification && (
+          <m.div
+            key="teasa"
+            transition={{ duration: 0.5 }}
+            initial={{ opacity: 0, y: 100 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: 100 }}
+            className="z-50 fixed bottom-10 w-screen flex justify-center text-center"
+          >
+            <div className="bg-green-600 text-white  px-2 py-2 font-bold rounded-[30px]">
+              {notificationMessage}
+            </div>
+          </m.div>
+        )}
+      </AnimatePresence>
+    );
+  };
+
+  return { Notification: NotificationComponent, show };
+};