@bigfishtv/cockpit/src/components/notification/Alert.js

import PropTypes from 'prop-types'
import React, { Component } from 'react'
import classnames from 'classnames'
import Icon from '../Icon'

/**
 * Alert component, used by NotificationsHost
 */
export default class Alert extends Component {
	static propTypes = {
		/** Alert message, can be text or react component */
		message: PropTypes.node,
		/** Alert status, used to color accordingly */
		status: PropTypes.oneOf(['success', 'error', 'warning', 'info']),
		/** Alert index, used to vertically position */
		index: PropTypes.number, // null if it should be hidden offscreen
	}

	render() {
		const { status, message, index, autoDismiss, dismissed, ...props } = this.props
		return (
			<div className={classnames('alert', status)} {...props} style={{ top: index == null ? -100 : index * 60 + 20 }}>
				<div className="alert-icon">
					<Icon name={status} />
				</div>
				<div className="alert-content">
					<div className="alert-message">{message}</div>
				</div>
				<button className="alert-dismiss">
					<Icon name="close" size="18" />
				</button>
			</div>
		)
	}
}