@vectara/vectara-ui/lib/components/notification/Notification.js

Vectara's design system, codified as a React and Sass component library

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import classNames from "classnames";
import { toast as sonnerToast } from "sonner";
import { BiCheck, BiError, BiInfoCircle, BiSolidHand, BiX } from "react-icons/bi";
import { VuiText } from "../typography/Text";
import { VuiTextColor } from "../typography/TextColor";
import { VuiFlexContainer } from "../flex/FlexContainer";
import { VuiFlexItem } from "../flex/FlexItem";
import { VuiIconButton } from "../button/IconButton";
import { VuiIcon } from "../icon/Icon";
import { VuiSpacer } from "../spacer/Spacer";
import { VuiCopyButton } from "../copyButton/CopyButton";
export const addNotification = (props) => {
    return sonnerToast.custom((id) => (_jsx(VuiNotification, Object.assign({ onDismiss: () => {
            sonnerToast.dismiss(id);
        } }, props))), { duration: 10000 });
};
export const VuiNotification = ({ color, message, onDismiss, children, hasCopyButton }) => {
    const classes = classNames("vuiNotification", `vuiNotification--${color}`);
    let icon;
    switch (color) {
        case "primary":
            icon = (_jsx(VuiIcon, Object.assign({ color: "primary" }, { children: _jsx(BiInfoCircle, {}) })));
            break;
        case "success":
            icon = (_jsx(VuiIcon, Object.assign({ color: "success" }, { children: _jsx(BiCheck, {}) })));
            break;
        case "warning":
            icon = (_jsx(VuiIcon, Object.assign({ color: "warning" }, { children: _jsx(BiError, {}) })));
            break;
        case "danger":
            icon = (_jsx(VuiIcon, Object.assign({ color: "danger" }, { children: _jsx(BiSolidHand, {}) })));
            break;
        default:
            icon = null;
    }
    return (_jsx("div", Object.assign({ className: classes, "data-testid": `notification-${color}` }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "start", spacing: "s" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: 1 }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "start", spacing: "xs" }, { children: [icon, _jsxs("div", { children: [_jsx(VuiText, { children: _jsx(VuiTextColor, Object.assign({ color: color }, { children: message })) }), hasCopyButton && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "s" }), _jsx(VuiCopyButton, { value: message, size: "s", label: "Copy" })] })), children && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "s" }), children] }))] })] })) })), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiIconButton, { "aria-label": "Dismiss message", size: "xs", color: "neutral", icon: _jsx(VuiIcon, { children: _jsx(BiX, {}) }), onClick: () => onDismiss(), "data-testid": `dismissNotificationButton-${color}` }) }))] })) })));
};