NotFoundPage.tsx

 1import makeStyles from '@mui/styles/makeStyles';
 2
 3import BackToListButton from '../../components/BackToListButton';
 4
 5const useStyles = makeStyles((theme) => ({
 6  main: {
 7    maxWidth: 1000,
 8    margin: 'auto',
 9    marginTop: theme.spacing(10),
10  },
11  logo: {
12    height: '350px',
13    display: 'block',
14    marginLeft: 'auto',
15    marginRight: 'auto',
16  },
17  icon: {
18    display: 'block',
19    marginLeft: 'auto',
20    marginRight: 'auto',
21    fontSize: '80px',
22  },
23  backLink: {
24    marginTop: theme.spacing(1),
25    textAlign: 'center',
26  },
27  header: {
28    fontSize: '30px',
29    textAlign: 'center',
30  },
31}));
32
33function NotFoundPage() {
34  const classes = useStyles();
35  return (
36    <main className={classes.main}>
37      <h1 className={classes.header}>404  Page not found</h1>
38      <img
39        src="/logo-alpha-flat-outline.svg"
40        className={classes.logo}
41        alt="git-bug Logo"
42      />
43      <div className={classes.backLink}>
44        <BackToListButton />
45      </div>
46    </main>
47  );
48}
49
50export default NotFoundPage;