{"size": 966, "ext": "js", "max_stars_repo_path": "packages/web/src/components/Notifications/index.js", "max_stars_repo_name": "trezy-studios/twitch-channel-points-hackathon", "max_stars_repo_stars_event_min_datetime": "2021-04-05T00:26:50.000Z", "max_stars_repo_stars_event_max_datetime": "2021-04-05T00:26:50.000Z", "max_issues_repo_path": "packages/web/src/components/Notifications/index.js", "max_issues_repo_name": "trezy-studios/twitch-channel-points-hackathon", "max_issues_repo_issues_event_min_datetime": "2021-02-24T04:15:12.000Z", "max_issues_repo_issues_event_max_datetime": "2021-06-27T16:43:29.000Z", "max_forks_repo_path": "packages/web/src/components/Notifications/index.js", "max_forks_repo_name": "trezy-studios/twitch-channel-points-hackathon", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": 44, "max_forks_count": null, "avg_line_length": 16.1, "max_line_length": 64, "alphanum_fraction": 0.5786749482}
// Module imports
import classnames from 'classnames'





// Local imports
import { useNotifications } from 'contexts/NotificationsContext'





export function Notifications() {
	const {
		closeNotification,
		notifications,
	} = useNotifications()

	return (
		<div className="notifications">
			{notifications.map(notification => {
				const {
					id,
					message,
					title,
					type,
				} = notification

				const classnamesObject = {
					message: true,
					'is-small': true,
				}

				if (type) {
					classnamesObject[`is-${type}`] = true
				}

				return (
					<article
						className={classnames(classnamesObject)}
						key={id}>
						<div className="message-header">
							<p>{title}</p>
							<button
								aria-label="delete"
								className="delete"
								onClick={() => closeNotification(notification)} />
						</div>
						<div className="message-body">
							{message}
						</div>
					</article>
				)
			})}
		</div>
	)
}
