joyent-portal/packages/joyent-boilerplate/src/components/navigation/not-found.js

44 lines
1018 B
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import remcalc from 'remcalc';
import { H1, P, Button, ViewContainer } from 'joyent-ui-toolkit';
const StyledContainer = styled.div`
margin-top: ${remcalc(60)};
`;
const StyledTitle = styled(H1)`
font-weight: normal;
font-size: ${remcalc(32)};
`;
const StyledP = styled(P)`
margin-bottom: ${remcalc(30)};
max-width: ${remcalc(490)};
`;
const NotFound = ({
title = 'I have no memory of this place',
message = 'HTTP 404: We cant find what you are looking for. Next time, always follow your nose.',
link = 'Back home',
to = '/'
}) => (
<ViewContainer>
<StyledContainer>
<StyledTitle>{title}</StyledTitle>
<StyledP>{message}</StyledP>
<Button to={to}>{link}</Button>
</StyledContainer>
</ViewContainer>
);
NotFound.propTypes = {
title: PropTypes.string,
message: PropTypes.string,
link: PropTypes.string,
to: PropTypes.string
};
export default NotFound;