58 lines
1.1 KiB
JavaScript
58 lines
1.1 KiB
JavaScript
|
import React from 'react';
|
||
|
|
import styled from 'styled-components';
|
||
|
|
import Lottie from 'react-lottie';
|
||
|
|
import animationData from '../lottie/box_error';
|
||
|
|
|
||
|
|
const Body = styled.div`
|
||
|
|
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,300,500);
|
||
|
|
font-size: 100%;
|
||
|
|
line-height: 1.5;
|
||
|
|
font-family: "Roboto", sans-serif;
|
||
|
|
display:flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
`;
|
||
|
|
const Container = styled.div`
|
||
|
|
|
||
|
|
position: relative;
|
||
|
|
background-color: #66bfbf;
|
||
|
|
text-align: center;
|
||
|
|
|
||
|
|
|
||
|
|
`;
|
||
|
|
const Heading = styled.h1`
|
||
|
|
padding-top: 15%;
|
||
|
|
color: white;
|
||
|
|
font-size: 4rem;
|
||
|
|
margin: 0px;
|
||
|
|
|
||
|
|
|
||
|
|
`;
|
||
|
|
const defaultOptions = {
|
||
|
|
loop: true,
|
||
|
|
autoplay: true,
|
||
|
|
animationData: animationData,
|
||
|
|
rendererSettings: {
|
||
|
|
preserveAspectRatio: "xMidYMid slice"
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const Error404 = () => {
|
||
|
|
return (
|
||
|
|
<Body>
|
||
|
|
<Container>
|
||
|
|
<Heading>Error </Heading>
|
||
|
|
<br />
|
||
|
|
<Lottie height={500} width={500} options={defaultOptions} />
|
||
|
|
</Container>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</Body>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
);
|
||
|
|
}
|
||
|
|
export default Error404;
|