/** @jsxImportSource @emotion/react */ import { css } from '@emotion/react'; import { INotification } from '@magicbell/react-headless'; import { useTheme } from '../../context/MagicBellThemeContext.js'; import DotIcon from '../icons/DotIcon.js'; export interface Props { notification: INotification; } /** * Component that renders a dot with style based on notification state * * @example * */ export default function NotificationState({ notification }: Props) { const { notification: themeVariants } = useTheme(); const theme = !notification.isSeen ? themeVariants.unseen : !notification.isRead ? themeVariants.unread : themeVariants.default; return (
); }