UI notification/alert system with global redux state

client/src/components/UI/Notification/Notification.module.css

@@ -0,0 +1,47 @@
+.Notification {
+  width: 300px;
+  background-color: var(--color-background);
+  border: 1px solid var(--color-primary);
+  color: var(--color-primary);
+  border-radius: 4px;
+  padding: 15px 10px;
+  transition: all 0.25s;
+  margin-bottom: 10px;
+}
+
+.Notification:hover {
+  background-color: var(--color-primary);
+  color: var(--color-background);
+  cursor: pointer;
+}
+
+.Notification:last-child {
+  margin-bottom: 0;
+}
+
+.NotificationOpen {
+  animation: slideIn 0.3s;
+}
+
+.NotificationClose {
+  animation: slideOut 0.3s;
+  transform: translateX(600px);
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(600px);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideOut {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(600px);
+  }
+}

client/src/components/UI/Notification/Notification.tsx

@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react';
+import { connect } from 'react-redux';
+import { clearNotification } from '../../../store/actions';
+
+import classes from './Notification.module.css';
+
+interface ComponentProps {
+  title: string;
+  message: string;
+  id: number;
+  clearNotification: (id: number) => void;
+}
+
+const Notification = (props: ComponentProps): JSX.Element => {
+  const [isOpen, setIsOpen] = useState(true);
+  const elementClasses = [classes.Notification, isOpen ? classes.NotificationOpen : classes.NotificationClose].join(' ');
+
+  useEffect(() => {
+    const closeNotification = setTimeout(() => {
+      setIsOpen(false);
+    }, 3500);
+
+    const clearNotification = setTimeout(() => {
+      props.clearNotification(props.id);
+    }, 3600)
+
+    return () => {
+      window.clearTimeout(closeNotification);
+      window.clearTimeout(clearNotification);
+    }
+  }, [])
+
+  return (
+    <div className={elementClasses}>
+      <h4>{props.title}</h4>
+      <p>{props.message}</p>
+      <div className={classes.Pog}></div>
+    </div>
+  )
+}
+
+export default connect(null, { clearNotification })(Notification);