-
Notifications
You must be signed in to change notification settings - Fork 11
/
404.tsx
48 lines (38 loc) · 1.07 KB
/
404.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
48
import { Link } from 'gatsby';
import React, { FC } from 'react';
import styled from 'styled-components';
import { Container, Layout, PageTitle, Seo } from '@components/shared';
import { notFound } from '@images';
import { useSiteMetadata } from '@hooks';
const Text = styled.p`
text-align: center;
line-height: 1.6;
a {
color: ${({ theme }) => theme.colors.base};
}
`;
const Img = styled.img.attrs(() => ({ src: notFound, alt: '' }))`
width: 100%;
max-height: 100%;
`;
/** Displays a generic page for pages that are not found. */
const NotFoundPage: FC = () => {
const siteMetadata = useSiteMetadata();
return (
<Layout>
<Seo title="Page not found" description="Page not found" />
<Container>
<PageTitle>Page Not Found</PageTitle>
<Img />
<Text>
Please return{' '}
<Link to="/" title={`${siteMetadata.title} home page`}>
home
</Link>{' '}
or use the menu to navigate to a different page.
</Text>
</Container>
</Layout>
);
};
export default NotFoundPage;