frontend/src/pages/UIError.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

import { GithubRepoRoot } from "@/constants";
import { Reload } from "@/utilities";
import { faDizzy } from "@fortawesome/free-regular-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  Anchor,
  Box,
  Button,
  Center,
  Container,
  Group,
  Text,
  Title,
} from "@mantine/core";
import { FunctionComponent } from "react";

interface Props {
  error: Error;
}

const UIError: FunctionComponent<Props> = ({ error }) => (
  <Container my="lg">
    <Center>
      <Title>
        <Box component="span" mr="md">
          <FontAwesomeIcon icon={faDizzy}></FontAwesomeIcon>
        </Box>
        <Text component="span" inherit>
          Oops! UI is crashed!
        </Text>
      </Title>
    </Center>
    <Center>
      <Text mb="lg">{error.message}</Text>
    </Center>
    <Group position="center">
      <Anchor href={`${GithubRepoRoot}/issues/new/choose`} target="_blank">
        <Button color="yellow">Report Issue</Button>
      </Anchor>
      <Button onClick={Reload} color="light">
        Reload Page
      </Button>
    </Group>
  </Container>
);

export default UIError;