# give/4.16.9/src/Views/Components/AdminDetailsPage/Notifications/Notification.tsx

GiveWP – Donation Plugin and Fundraising Platform, version 4.16.9. 75 lines.

- Page: https://pluginprobe.com/plugins/give/4.16.9/code/src/Views/Components/AdminDetailsPage/Notifications/Notification.tsx
- Raw: https://pluginprobe.com/plugins/give/4.16.9/raw/src/Views/Components/AdminDetailsPage/Notifications/Notification.tsx
- Modified: 2025-06-18T15:01:58+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/give/4.16.9/code/src/Views/Components/AdminDetailsPage/Notifications/Notification.tsx#L10-L20`.

```tsx
import {useEffect} from '@wordpress/element';
import {dispatch} from '@wordpress/data';
import cx from 'classnames';
import type {Notification} from '../types';
import {CloseIcon} from '../Icons';

import styles from './Notices.module.scss';

const Snackbar = ({notification, onDismiss}: { notification: Notification, onDismiss: () => void }) => {
    return (

        <div
            className={cx(styles.snackbar, styles[`type-${notification.type}-snackbar`])}
        >
            <div>
                {typeof notification.content === 'function' ? notification.content(onDismiss, notification) : notification.content}
            </div>
            {notification.isDismissible && (
                <a href="#" onClick={onDismiss}>
                    <CloseIcon />
                </a>
            )}

        </div>
    );
};

const Notice = ({notification, onDismiss}: { notification: Notification, onDismiss: () => void }) => {
    return (

        <div
            className={cx(styles.notice, styles[`type-${notification.type}`])}
        >
            <div className={styles.notificationContent}>
                {typeof notification.content === 'function' ? notification.content(onDismiss, notification) : notification.content}
            </div>
            {notification.isDismissible && (
                <a href="#" onClick={onDismiss}>
                    <CloseIcon />
                </a>
            )}

        </div>
    );
};

export default ({notification}: { notification: Notification }) => {

    useEffect(() => {
        if (notification.autoHide) {
            setTimeout(() => {
                dispatch('givewp/admin-details-page-notifications').dismissNotification(notification.id);
            }, notification.duration);
        }
    }, []);

    const onDismiss = () => {
        dispatch('givewp/admin-details-page-notifications').dismissNotification(notification.id);

        if (typeof notification.onDismiss === 'function') {
            notification.onDismiss();
        }
    };


    switch (notification.notificationType) {
        case 'snackbar':
            return <Snackbar notification={notification} onDismiss={onDismiss} />
        case 'notice':
            return <Notice notification={notification} onDismiss={onDismiss} />
        default:
            return null;
    }
}

```