@boomerang-io/carbon-addons-boomerang-react/dist/esm/components/PlatformNotifications/PlatformNotification.js

Carbon Addons for Boomerang apps

import React from 'react';
import cx from 'classnames';
import { Close } from '@carbon/react/icons';
import DOMPurify from 'dompurify';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import { prefix } from '../../internal/settings.js';

/*
IBM Confidential
694970X, 69497O0
© Copyright IBM Corp. 2022, 2024
*/
dayjs.extend(relativeTime);
function Notification({ readNotification, data }) {
    return (React.createElement("div", { className: cx(`${prefix}--bmrg-notification`, {
            [`--${data.type}`]: data.type,
        }), "aria-label": `${data.title} notification` },
        React.createElement("div", { className: `${prefix}--bmrg-notification-content` },
            React.createElement("div", { className: `${prefix}--bmrg-notification-content__creator` }, data.creator),
            React.createElement("h2", { className: `${prefix}--bmrg-notification-content__title` }, data.title),
            React.createElement("p", { className: `${prefix}--bmrg-notification-content__desc`, dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(data.detail) } }),
            React.createElement("time", { className: `${prefix}--bmrg-notification-content__date` }, `${dayjs(data.date).fromNow()} at ${dayjs(data.date).format("hh:mma")}`),
            React.createElement("button", { className: `${prefix}--bmrg-notification-content__close`, onClick: () => readNotification(data.id) },
                React.createElement(Close, { size: 16, title: "Mark as read icon" })))));
}

export { Notification as default };