1
0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00
market/src/pages/404.tsx

74 lines
1.6 KiB
TypeScript

import React, { ReactElement } from 'react'
import { PageProps, graphql } from 'gatsby'
import Page from '../components/templates/Page'
import fishfail from '../images/fishfail.gif'
import { Helmet } from 'react-helmet'
import Button from '../components/atoms/Button'
export default function PageGatsby404(props: PageProps): ReactElement {
const {
title,
description,
actions
} = (props.data as any).content.edges[0].node.childPagesJson
return (
<>
<Helmet>
<style type="text/css">{`
body {
background: url(${fishfail}) center bottom no-repeat;
background-size: cover;
min-height: 100vh;
}
main {
text-align: center;
}
header *,
footer *,
main * {
color: var(--brand-white) !important;
}
header svg path {
fill: var(--brand-white) !important;
}
`}</style>
</Helmet>
<Page
title={title}
description={description}
uri={props.uri}
headerCenter
>
{actions.map((action: { title: string; url: string }) => (
<Button style="primary" key={action.title} to={action.url}>
{action.title}
</Button>
))}
</Page>
</>
)
}
export const contentQuery = graphql`
query Page404Query {
content: allFile(filter: { relativePath: { eq: "pages/404.json" } }) {
edges {
node {
childPagesJson {
title
description
actions {
title
url
}
}
}
}
}
}
`