Nitro-Cool-UI/src/components/notification-center/views/bubble-layouts/NotificationDefaultBubbleView.tsx

import { FC } from 'react';
import { NotificationBubbleItem, OpenUrl } from '../../../../api';
import { Flex, LayoutNotificationBubbleView, LayoutNotificationBubbleViewProps, Text } from '../../../../common';

export interface NotificationDefaultBubbleViewProps extends LayoutNotificationBubbleViewProps {
  item: NotificationBubbleItem;
}

export const NotificationDefaultBubbleView: FC<NotificationDefaultBubbleViewProps> = props => {
  // Do not destructure key!
  const { item = null, onClose = null, ...restProps } = props;
  
  const htmlText = item.message.replace(/\r\n|\r|\n/g, '<br />');

  return (
    <LayoutNotificationBubbleView onClose={ onClose } gap={ 2 } alignItems="center"
      onClick={ event => (item.linkUrl && item.linkUrl.length && OpenUrl(item.linkUrl)) }
      { ...restProps }>
      <Flex center className="bubble-image-container">
        { (item.iconUrl && item.iconUrl.length) &&
          <img className="no-select" src={ item.iconUrl } alt="" /> }
      </Flex>
      <Text wrap variant="white" dangerouslySetInnerHTML={ { __html: htmlText } } />
    </LayoutNotificationBubbleView>
  );
};