45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import { Text, Button, Center, VStack, Heading } from '@chakra-ui/react';
|
|
import { Link } from 'react-router-dom';
|
|
import { Player } from '@lottiefiles/react-lottie-player';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
import animate from '../../assets/animation/notFound.json';
|
|
|
|
const NotFound = () => {
|
|
const { t } = useTranslation('~', {
|
|
keyPrefix: 'dry-wash',
|
|
});
|
|
|
|
return (
|
|
<Center minH='100vh'>
|
|
<VStack spacing={4} textAlign='center'>
|
|
<Player
|
|
autoplay
|
|
loop
|
|
src={animate}
|
|
style={{
|
|
height: '100%',
|
|
width: '100%',
|
|
maxHeight: '450px',
|
|
maxWidth: '450px',
|
|
}}
|
|
/>
|
|
<Heading fontSize='xl'>{t(`notFound.title`)}</Heading>
|
|
<Text fontSize='lg'>{t(`notFound.description`)}</Text>
|
|
<Button
|
|
as={Link}
|
|
to='/dry-wash'
|
|
colorScheme='teal'
|
|
size='lg'
|
|
variant='outline'
|
|
>
|
|
{t(`notFound.button.back`)}
|
|
</Button>
|
|
</VStack>
|
|
</Center>
|
|
);
|
|
};
|
|
|
|
export default NotFound;
|