alkem-io / client-web / #9504

import { IconButton, Paper } from '@mui/material';

import NotificationsNoneOutlinedIcon from '@mui/icons-material/NotificationsNoneOutlined';

import { useTranslation } from 'react-i18next';

import BadgeCounter from '@/core/ui/icon/BadgeCounter';

import { useInAppNotifications } from '@/main/inAppNotifications/useInAppNotifications';

import { useInAppNotificationsContext } from '@/main/inAppNotifications/InAppNotificationsContext';

export const PlatformNotificationsButton = () => {

  const { isEnabled, setIsOpen } = useInAppNotificationsContext();

  const { unreadCount } = useInAppNotifications();

  }

      component={IconButton}

      onClick={openNotifications}

      aria-label={t('buttons.notifications')}

        overflow: 'visible',

        '&:hover': {

          opacity: 0.9,

        },

      }}

    >

      <NotificationsNoneOutlinedIcon />

      {unreadCount > 0 && (

        <BadgeCounter count={unreadCount} size="small" sx={{ position: 'absolute', top: -4, right: -4 }} />

      )}

    </Paper>

};