modal accept with notifications

src/components/Notification/Notification.jsx

@@ -0,0 +1,36 @@
+import React from "react";
+import {useDispatch, useSelector} from "react-redux";
+
+import { closeNotification, getNotification } from "@redux/outstaffingSlice";
+
+import close from "assets/icons/closeProjectPersons.svg";
+import copy from "assets/icons/copyNotification.svg";
+import error from "assets/icons/errorNotification.svg";
+import archive from "assets/icons/archiveNotification.svg";
+import success from "assets/icons/successNotification.svg"
+
+const images = {
+    archive: archive,
+    error: error,
+    copy: copy,
+    success: success
+}
+
+import './notification.scss'
+
+export const Notification = () => {
+    const dispatch = useDispatch();
+    const notificationInfo = useSelector(getNotification)
+    return (
+        <div className='notification'>
+            <div className='notification__info'>
+                <img src={images[notificationInfo.type]} alt='img' />
+                <h2>{notificationInfo.text}</h2>
+            </div>
+            <img onClick={() => dispatch(closeNotification())}
+                 className='notification__close' src={close} alt='close' />
+        </div>
+    )
+}
+
+export default Notification

src/components/Notification/notification.scss

@@ -0,0 +1,35 @@
+.notification {
+  border-radius: 40px;
+  background: linear-gradient(180deg, #FFF 0%, #EBEBEB 100%);
+  padding: 20px 82px 17px 27px;
+  position: fixed;
+  bottom: 25px;
+  right: 25px;
+  z-index: 20;
+
+  &__info {
+    display: flex;
+    column-gap: 10px;
+    align-items: center;
+
+    h2 {
+      max-width: 194px;
+      font-weight: 500;
+      font-size: 16px;
+      margin-bottom: 0;
+    }
+
+    img {
+      max-width: 24px;
+    }
+  }
+
+  &__close {
+    cursor: pointer;
+    position: absolute;
+    top: 15px;
+    right: 25px;
+    width: 15px;
+    height: 15px;
+  }
+}