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

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

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import classNames from "classnames";
import { 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 { VuiHorizontalRule } from "../horizontalRule/HorizontalRule";
export const VuiNotification = ({ notification, onDismiss, notificationsCount, children }) => {
    const { color, message } = notification;
    const classes = classNames("vuiNotification", `vuiNotification--${color}`);
    const hasManyNotifications = notificationsCount > 1;
    const placeholder1Classes = classNames("vuiNotification", "vuiNotificationPlaceholder", {
        "vuiNotificationPlaceholder1-isVisible": notificationsCount > 1
    });
    const placeholder2Classes = classNames("vuiNotification", "vuiNotificationPlaceholder", {
        "vuiNotificationPlaceholder2-isVisible": notificationsCount > 2
    });
    return (_jsxs("div", Object.assign({ className: "vuiNotificationContainer" }, { children: [_jsxs("div", Object.assign({ className: classes }, { children: [_jsxs(VuiFlexContainer, Object.assign({ alignItems: "start", spacing: "s" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiIconButton, { "aria-label": "Hide notification", size: "xs", color: "neutral", icon: _jsx(VuiIcon, { children: _jsx(BiX, {}) }), onClick: () => onDismiss(notification) }) })), _jsxs(VuiFlexItem, Object.assign({ grow: 1 }, { children: [_jsx(VuiText, { children: _jsx(VuiTextColor, Object.assign({ color: color }, { children: message })) }), hasManyNotifications && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "xxs" }), _jsx(VuiText, Object.assign({ size: "xs" }, { children: _jsxs(VuiTextColor, Object.assign({ color: "subdued" }, { children: ["+", notificationsCount - 1, " more"] })) }))] }))] }))] })), children && (_jsxs(_Fragment, { children: [_jsx(VuiSpacer, { size: "s" }), _jsx(VuiHorizontalRule, {}), _jsx(VuiSpacer, { size: "xxs" }), children] }))] })), _jsx("div", { className: placeholder2Classes }), _jsx("div", { className: placeholder1Classes })] })));
};