components/extras/ProblemLoading.tsx

import * as React from 'react'

import { Box, Heading, Paragraph } from 'grommet'
import { AppWidthBox } from '../layout'
import { Logo } from './Logo'
import { SupportInfo } from './SupportInfo'

/**
 * Displays a box to the user indicating that something has not worked as intended. This is intended to be presented
 * in the case that the application has failed in a catastrophic way.
 *
 * ProblemLoading example:
 *
 * ```tsx
 * <ProblemLoading/>
 * ```
 * @component
 * @category Extras
 */
export const ProblemLoading = () => {
	// Do we add extra context to error reports (i.e. application name autofilled on support email)
	//let application = window.location.hostname

	return (
		<AppWidthBox style={{ minHeight: '100vh' }} background="light-4" align="center" alignContent="center">
			<Box background="white" round="medium" pad="medium" align="center">
				<Box direction="row">
					<Logo />
					<Heading>Something went wrong</Heading>
				</Box>
				<Paragraph textAlign="center">
					It looks like there was a problem loading the application. The application owner has automatically been
					notified of the issue.
				</Paragraph>
				<SupportInfo format="problem" alignment="center" />
			</Box>
		</AppWidthBox>
	)
}