| 1 | import { ArrowLeftIcon } from '@primer/octicons-react' |
| 2 | import { Button } from 'components/Button' |
| 3 | import { Layout } from 'components/Layout' |
| 4 | |
| 5 | const error404 = () => ( |
| 6 | <Layout title={['404 Not Found']} noIndex> |
| 7 | <section className="text-center"> |
| 8 | <div className="m-8 w-screen max-w-2xl sm:m-16"> |
| 9 | <h1 className="font-rounded text-4xl font-bold tracking-tighter text-gray-700"> |
| 10 | 404 Not Found |
| 11 | </h1> |
| 12 | <hr className="my-6" /> |
| 13 | <p className="text-lg">Oops! The requested page could not be found.</p> |
| 14 | <p className="mt-10"> |
| 15 | <Button |
| 16 | className="w-full max-w-xs text-xs" |
| 17 | onClick={() => window.history.back()} |
| 18 | outline |
| 19 | style={{ color: '#4a5568' }} |
| 20 | > |
| 21 | <span className="flex items-center justify-center text-lg"> |
| 22 | <ArrowLeftIcon className="mr-2 h-8 w-8" /> |
| 23 | Back to previous |
| 24 | </span> |
| 25 | </Button> |
| 26 | </p> |
| 27 | </div> |
| 28 | <style jsx>{` |
| 29 | section { |
| 30 | @apply flex w-full items-center justify-center; |
| 31 | |
| 32 | background-image: url("data:image/svg+xml,%3csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M0 40L40 0H20L0 20m40 20V20L20 40' fill='%23f0f0f0' fill-opacity='.2' fill-rule='evenodd'/%3e%3c/svg%3e"); |
| 33 | min-height: inherit; |
| 34 | } |
| 35 | `}</style> |
| 36 | </section> |
| 37 | </Layout> |
| 38 | ) |
| 39 | |
| 40 | export default error404 |
| 41 |