components/extras/Alert.tsx

/**
 *
 */
import * as React from 'react'
import { Box, Heading, Paragraph } from 'grommet'

export enum AlertType {
	INFO,
	ERROR,
	WARNING,
}

export interface AlertProps {
	/** If given, will present text larger than the body at the top of the alert */
	title?: string
	/** one of `AlertType` enum types. */
	type?: AlertType
	/** The content (body) of the alert. Will be presented inside the alert box. */
	children?: any
}

/**
 * Presents a simple coloured alert box that varies depending on type. Used to inform user of important or interesting
 * notices.
 *
 * Error example:
 * ```tsx
 * <Alert type={AlertType.ERROR}>There has been a problem loading this page</Alert>
 * ```
 *
 * Warning example:
 * ```tsx
 * <Alert type={AlertType.WARNING}>You must log-in to see this content</Alert>
 * ```
 *
 * Information example:
 * ```tsx
 * <Alert type={AlertType.INFO}>A new record has been added</Alert>
 * ```
 * @component
 * @category Extras
 */
export const Alert = (props: AlertProps) => {
	let background = 'status-ok'
	let colour = 'black'
	switch (props.type) {
		case AlertType.ERROR:
			background = 'status-error'
			colour = 'white'
			break
		case AlertType.WARNING:
			background = 'status-warning'
			break
		default:
	}
	return (
		<Box background={background} round="xsmall" margin={{ bottom: 'medium' }}>
			<Box margin="medium">
				{props.title && (
					<Heading color={colour} level={4} margin={{ bottom: 'small', top: 'none' }}>
						{props.title}
					</Heading>
				)}
				<Paragraph color={colour} margin={{ bottom: 'none', top: 'none' }}>
					{props.children}
				</Paragraph>
			</Box>
		</Box>
	)
}