Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 49 50 51 52 | 1x 1x 1x 1x 1x 1x 1x 1x 1x | import * as React from "react"
import { Head } from "./Head"
import { SiteHeader } from "./SiteHeader"
import { SiteFooter } from "./SiteFooter"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faSearch } from "@fortawesome/free-solid-svg-icons/faSearch"
export const NotFoundPage = (props: { baseUrl: string }) => {
return (
<html>
<Head
canonicalUrl={`${props.baseUrl}/search`}
pageTitle="404 Not Found"
pageDesc="Search articles and charts on Our World in Data."
baseUrl={props.baseUrl}
/>
<body className="NotFoundPage">
<SiteHeader baseUrl={props.baseUrl} />
<main>
<h1>Sorry, that page doesn’t exist!</h1>
<p>
You can search below or{" "}
<a href="/">return to the homepage</a>.
</p>
<form action="/search" method="GET">
<div className="inputWrapper">
<input
id="search_q"
type="search"
name="q"
autoFocus
/>
<FontAwesomeIcon icon={faSearch} />
</div>
<button className="btn" type="submit">
Search
</button>
</form>
</main>
<SiteFooter hideDonate={true} baseUrl={props.baseUrl} />
<script
dangerouslySetInnerHTML={{
__html: `
window.runNotFoundPage()
`,
}}
/>
</body>
</html>
)
}
|