github.com/lauslim12/expert-systems@v0.0.0-20221115131159-018513aad29c/web/src/components/Modal/AboutModal.tsx (about)

     1  import {
     2    Alert,
     3    AlertIcon,
     4    Button,
     5    Modal,
     6    ModalBody,
     7    ModalCloseButton,
     8    ModalContent,
     9    ModalFooter,
    10    ModalHeader,
    11    ModalOverlay,
    12    Text,
    13    VStack,
    14  } from '@chakra-ui/react';
    15  import { memo } from 'react';
    16  import { useTranslation } from 'react-i18next';
    17  import { AiFillLike } from 'react-icons/ai';
    18  
    19  /**
    20   * Accepts ChakraUI's modal props.
    21   */
    22  type Props = {
    23    isOpen: boolean;
    24    onClose: () => void;
    25  };
    26  
    27  /**
    28   * Describes the application.
    29   *
    30   * @param param - ChakraUI's modal props
    31   * @returns React Functional Component
    32   */
    33  const AboutModal = ({ isOpen, onClose }: Props) => {
    34    const { t } = useTranslation();
    35  
    36    return (
    37      <Modal
    38        isOpen={isOpen}
    39        onClose={onClose}
    40        size="5xl"
    41        motionPreset="slideInBottom"
    42        closeOnEsc={false}
    43        closeOnOverlayClick={false}
    44      >
    45        <ModalOverlay />
    46  
    47        <ModalContent>
    48          <ModalHeader>{t('about.title')}</ModalHeader>
    49          <ModalCloseButton />
    50  
    51          <ModalBody>
    52            <VStack as="article" align="stretch">
    53              <Alert as="section" status="success" variant="left-accent">
    54                <AlertIcon />
    55                {t('about.alert')}
    56              </Alert>
    57  
    58              <VStack as="section" align="start" spacing={4}>
    59                <VStack align="start">
    60                  <Text fontSize="lg" fontWeight="bold">
    61                    {t('about.purpose')}
    62                  </Text>
    63  
    64                  <Text>{t('about.content')}</Text>
    65                </VStack>
    66  
    67                <VStack align="start">
    68                  <Text fontSize="lg" fontWeight="bold">
    69                    {t('about.dataProcessing')}
    70                  </Text>
    71  
    72                  <Text>{t('about.dataProcessingExplanation')}</Text>
    73                </VStack>
    74  
    75                <VStack align="start">
    76                  <Text fontSize="lg" fontWeight="bold">
    77                    {t('about.algorithmOne')}
    78                  </Text>
    79  
    80                  <Text>{t('about.algorithmOneExplanation')}</Text>
    81                </VStack>
    82  
    83                <VStack align="start">
    84                  <Text fontSize="lg" fontWeight="bold">
    85                    {t('about.algorithmTwo')}
    86                  </Text>
    87  
    88                  <Text>{t('about.algorithmTwoExplanation')}</Text>
    89                </VStack>
    90  
    91                <VStack align="start">
    92                  <Text fontSize="lg" fontWeight="bold">
    93                    {t('about.process')}
    94                  </Text>
    95  
    96                  <Text>{t('about.inferenceProcess')}</Text>
    97                </VStack>
    98  
    99                <VStack align="start">
   100                  <Text fontSize="lg" fontWeight="bold">
   101                    {t('about.references')}
   102                  </Text>
   103  
   104                  <Text>{t('about.referencesAndSource')}</Text>
   105                </VStack>
   106              </VStack>
   107            </VStack>
   108          </ModalBody>
   109  
   110          <ModalFooter>
   111            <Button
   112              leftIcon={<AiFillLike />}
   113              colorScheme="green"
   114              onClick={onClose}
   115            >
   116              {t('about.close')}
   117            </Button>
   118          </ModalFooter>
   119        </ModalContent>
   120      </Modal>
   121    );
   122  };
   123  
   124  export default memo(AboutModal);