@magicbell/magicbell-react/dist/esm/components/NotificationState/NotificationState.js

React components for building a notification inbox for your app

import { jsx as _jsx } from "@emotion/react/jsx-runtime";
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import { useTheme } from '../../context/MagicBellThemeContext.js';
import DotIcon from '../icons/DotIcon.js';
/**
 * Component that renders a dot with style based on notification state
 *
 * @example
 * <NotificationState notification={notification} />
 */
export default function NotificationState({ notification }) {
    const { notification: themeVariants } = useTheme();
    const theme = !notification.isSeen
        ? themeVariants.unseen
        : !notification.isRead
            ? themeVariants.unread
            : themeVariants.default;
    return (_jsx("div", { css: css `
        flex: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 24px !important;
        height: 24px !important;
        color: ${theme.state.color} !important;
      `, children: _jsx(DotIcon, {}) }));
}
//# sourceMappingURL=NotificationState.js.map