Files
30-seconds-of-code/src/docs/pages/404.js
2019-08-22 08:41:24 +03:00

61 lines
1.7 KiB
JavaScript

import React from 'react';
import { connect } from 'react-redux';
import AniLink from 'gatsby-plugin-transition-link/AniLink';
import Shell from '../components/Shell';
import Meta from '../components/Meta';
// ===================================================
// Not found page
// ===================================================
const NotFoundPage = ({ isDarkMode }) => (
<>
<Meta title='Page not found' />
<Shell withIcon={true}>
<h2 className='page-title'>404</h2>
<div className='page-graphic page-not-found'>
<p className='empty-page-text'>
<strong>Page not found</strong>
<br />
</p>
<p className='empty-page-subtext'>
Seems like you have reached a page that does not exist.
</p>
<AniLink
paintDrip
to='/'
hex={isDarkMode ? '#434E76' : '#FFFFFF'}
className='button button-a button-home'
>
<svg
xmlns='http://www.w3.org/2000/svg'
width='24'
height='24'
viewBox='0 0 24 24'
fill='none'
stroke='currentColor'
strokeWidth='2'
stroke-linecap='round'
strokeLinejoin='round'
className='feather feather-home'
>
<path d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'></path>
<polyline points='9 22 9 12 15 12 15 22'></polyline>
</svg>
&nbsp;&nbsp;Go home
</AniLink>
</div>
</Shell>
</>
);
export default connect(
state => ({
isDarkMode: state.app.isDarkMode,
lastPageTitle: state.app.lastPageTitle,
lastPageUrl: state.app.lastPageUrl,
searchQuery: state.app.searchQuery,
}),
null,
)(NotFoundPage);