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);