ErrorPage.tsx

import React, { FC, FunctionComponent } from 'react'
import styled from 'styled-components'
import { PageMarginLeftRight } from '../../style/PageMarginLeftRight'
import { distance } from '../../style/sizes'
import { Link } from 'react-router-dom'

export const ErrorPage: FunctionComponent = () => {
    return <ErrorPageTemplate message={'Sorry, the requested page was not found or could not be accessed :|'}/>
}

const ErrorPageTemplate: FC<{ message: string }> = ({message}) => {
    return (
        <PageMarginLeftRight>
            <StyledRow>
                <h2>{message}</h2>
            </StyledRow>
            <StyledRow>
                <Link to="/">Return to Landing Page</Link>
            </StyledRow>
        </PageMarginLeftRight>
    )
}

const StyledRow = styled.div`
    padding: ${distance.large};
`