feat(dashboard-v2): add custom 404 page
This commit is contained in:
parent
910270bca4
commit
3ed20e670b
|
@ -1,54 +1,27 @@
|
||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import { Link } from "gatsby";
|
|
||||||
|
|
||||||
// styles
|
import DashboardLayout from "../layouts/DashboardLayout";
|
||||||
const pageStyles = {
|
|
||||||
color: "#232129",
|
|
||||||
padding: "96px",
|
|
||||||
fontFamily: "-apple-system, Roboto, sans-serif, serif",
|
|
||||||
};
|
|
||||||
const headingStyles = {
|
|
||||||
marginTop: 0,
|
|
||||||
marginBottom: 64,
|
|
||||||
maxWidth: 320,
|
|
||||||
};
|
|
||||||
|
|
||||||
const paragraphStyles = {
|
import { Metadata } from "../components/Metadata";
|
||||||
marginBottom: 48,
|
import HighlightedLink from "../components/HighlightedLink";
|
||||||
};
|
|
||||||
const codeStyles = {
|
|
||||||
color: "#8A6534",
|
|
||||||
padding: 4,
|
|
||||||
backgroundColor: "#FFF4DB",
|
|
||||||
fontSize: "1.25rem",
|
|
||||||
borderRadius: 4,
|
|
||||||
};
|
|
||||||
|
|
||||||
// markup
|
|
||||||
const NotFoundPage = () => {
|
const NotFoundPage = () => {
|
||||||
return (
|
return (
|
||||||
<main style={pageStyles}>
|
<div>
|
||||||
<title>Not found</title>
|
<Metadata>
|
||||||
<h1 style={headingStyles}>Page not found</h1>
|
<title>Not found</title>
|
||||||
<p style={paragraphStyles}>
|
</Metadata>
|
||||||
Sorry{" "}
|
<section className="mt-12">
|
||||||
<span role="img" aria-label="Pensive emoji">
|
<h1>Oops! 😔</h1>
|
||||||
😔
|
<p>Whatever you're looking for is not here.</p>
|
||||||
</span>{" "}
|
<p>
|
||||||
we couldn’t find what you were looking for.
|
Would you like to <HighlightedLink to="/">go back to homepage</HighlightedLink>?
|
||||||
<br />
|
</p>
|
||||||
{process.env.NODE_ENV === "development" ? (
|
</section>
|
||||||
<>
|
</div>
|
||||||
<br />
|
|
||||||
Try creating a page in <code style={codeStyles}>src/pages/</code>.
|
|
||||||
<br />
|
|
||||||
</>
|
|
||||||
) : null}
|
|
||||||
<br />
|
|
||||||
<Link to="/">Go home</Link>.
|
|
||||||
</p>
|
|
||||||
</main>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
NotFoundPage.Layout = DashboardLayout;
|
||||||
|
|
||||||
export default NotFoundPage;
|
export default NotFoundPage;
|
||||||
|
|
Reference in New Issue