From 482b1c8db5cfeaa20d75ce92fcb10f3ca8433633 Mon Sep 17 00:00:00 2001
From: Factiven <dabinaya.fathan@gmail.com>
Date: Fri, 14 Apr 2023 00:07:02 +0700
Subject: Update 5th

---
 pages/lib/useNotify.js | 41 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 pages/lib/useNotify.js

(limited to 'pages/lib/useNotify.js')

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 };
+};
-- 
cgit v1.2.3