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')(({ theme }) => ({
  position: 'fixed',
  top: '1rem',
  left: '50%',
  transform: 'translateX(-50%)',
  display: 'flex',
  flexDirection: 'column',
  gap: theme.spacing(0.5),
  justifyContent: 'center',
  alignItems: 'center',
  zIndex: 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;