Proyectos de Subversion LeadersLinked - SPA

import React from 'react';

import { useSelector } from 'react-redux';

import { styled } from '@mui/material';

import AlertComponent from './AlertComponent';

const NotificationDiv = styled('div')`

  position: fixed;

  top: 1rem;

  left: 50%;

  transform: translateX(-50%);

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  z-index: 2200;

`;

const NotificationAlert = () => {

  const notifications = useSelector(({ notification }) => notification.notifications);

  return (

    <NotificationDiv>

      <AlertComponent

        notification={{

          id: '1',

          style: 'success',

          msg: 'Teste de notificação'

        }}

      />

      <AlertComponent

        notification={{

          id: '1',

          style: 'danger',

          msg: 'Teste de notificação'

        }}

      />

      {notifications.map((notification) => (

        <AlertComponent notification={notification} key={notification.id} />

      ))}

    </NotificationDiv>

  );

};

export default NotificationAlert;