import { useRecoilValue } from "recoil"; import { themeStore } from "../../stores"; import { ThemeOptions } from "../../lib/theme"; import type { Notification } from "../../lib/notifications"; import CheckThinIcon from "../icons/CheckThinIcon"; import InfoThinIcon from "../icons/InfoThinIcon"; import WarningThinIcon from "../icons/WarningThinIcon"; import XThinIcon from "../icons/XThinIcon"; type Props = { notification: Notification; }; const NotificationComp = ({ notification }: Props) => { const theme = useRecoilValue(themeStore); if (!notification?.type) { return null; } const iconMap = { info: { component: InfoThinIcon, props: { color: "#1e3a8a", }, }, error: { component: XThinIcon, props: { color: theme.selectedTheme === ThemeOptions.LIGHT ? "#ffd6d7" : "#fec3c3", }, }, success: { component: CheckThinIcon, props: { color: "#14532D", }, }, warning: { component: WarningThinIcon, props: { color: "#7c2d12", }, }, }; const IconComponent = iconMap[notification.type].component; return ( <div className="animate-fadeInUp" role="alert" aria-live="assertive" aria-atomic="true" > <div className={`alert alert-${notification.type} text-sm mb-3 peer-last:mb-0`} > <div> <IconComponent {...iconMap[notification.type].props} /> <span className="pl-1">{notification.msg}</span> </div> </div> </div> ); }; export default NotificationComp;