refactor: replace inline notification handling with Notification component in LockerStatus

src/pages/LockerStatus.jsx

@@ -9,7 +9,8 @@ import clsx from "clsx";
 import Button from "../components/Button";
 import { lockerService } from "../services/locker.service";
 import { useLoading } from "../hooks/useLoading";
-import { AnimatePresence, motion } from "motion/react";
+import { AnimatePresence } from "motion/react";
+import Notification from "../components/Notification";
 
 function LockerStatus() {
   const { t } = useTranslation();
@@ -93,7 +94,11 @@ function LockerStatus() {
         type: "success",
       });
     } catch (error) {
-      showToast(error.response.data.message, "error");
+      setNotification({
+        visible: true,
+        message: error.message,
+        type: "error",
+      });
     } finally {
       setIsLoading(false);
     }
@@ -130,21 +135,7 @@ function LockerStatus() {
   return (
     <div>
       <AnimatePresence>
-        {notification.visible && (
+        {notification.visible && <Notification notification={notification} />}
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            className={clsx(
-              "p-4 mb-8 font-body text-center text-xl rounded-2xl flex items-center justify-center gap-2",
-              notification.type === "error"
-                ? "bg-error-surface text-error"
-                : "bg-success-surface text-success"
-            )}
-          >
-            {notification.message}
-          </motion.div>
-        )}
       </AnimatePresence>
       <div className="relative">
       {notification.type === "success" && (