github.com/lauslim12/expert-systems@v0.0.0-20221115131159-018513aad29c/web/src/pages/NotFound.tsx (about) 1 import { Button, Heading, Text, VStack } from '@chakra-ui/react'; 2 import { memo } from 'react'; 3 import { useTranslation } from 'react-i18next'; 4 import { AiFillHome } from 'react-icons/ai'; 5 import { Link as ReactLink } from 'react-router-dom'; 6 7 /** 8 * Renders if a user tries a non-existent page. 9 * 10 * @returns React Functional Component 11 */ 12 const NotFound = () => { 13 const { t } = useTranslation(); 14 15 return ( 16 <VStack p={2} h="100vh" w="100vw" align="center" justify="center"> 17 <Heading textAlign="center">{t('notFound.title')}</Heading> 18 19 <Text textAlign="center">{t('notFound.message')}</Text> 20 21 <Button 22 as={ReactLink} 23 to="/" 24 colorScheme="green" 25 leftIcon={<AiFillHome />} 26 variant="outline" 27 > 28 {t('notFound.back')} 29 </Button> 30 </VStack> 31 ); 32 }; 33 34 export default memo(NotFound);