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

     1  import { Button, FormControl, FormLabel, SimpleGrid } from '@chakra-ui/react';
     2  import { Dispatch, memo, SetStateAction } from 'react';
     3  import { useTranslation } from 'react-i18next';
     4  import { AiOutlineCheck } from 'react-icons/ai';
     5  
     6  import { StateCertaintyWeight } from '../../types/UserCertaintyWeight';
     7  
     8  /**
     9   * Will accept a state, the setter, and the title.
    10   */
    11  type Props = {
    12    state: StateCertaintyWeight;
    13    setState: Dispatch<SetStateAction<StateCertaintyWeight>>;
    14    title: string;
    15  };
    16  
    17  /**
    18   * Reusable component to handle user inputs according to the Expert System.
    19   *
    20   * @param param - the state, state's setter, and the title
    21   * @returns React Functional Component
    22   */
    23  const AnswerInput = ({ state, setState, title }: Props) => {
    24    const { t } = useTranslation();
    25  
    26    return (
    27      <FormControl as="fieldset">
    28        <FormLabel as="legend" fontWeight="bold">
    29          {title}
    30        </FormLabel>
    31  
    32        <SimpleGrid columns={[1, 2, 2, 4]} spacing="10px">
    33          <Button
    34            colorScheme="green"
    35            leftIcon={state === 0 ? <AiOutlineCheck /> : undefined}
    36            variant={state === 0 ? 'solid' : 'outline'}
    37            onClick={() => setState(0)}
    38          >
    39            {t('menu.doNotFeelSo')}
    40          </Button>
    41  
    42          <Button
    43            colorScheme="blue"
    44            leftIcon={state === 0.25 ? <AiOutlineCheck /> : undefined}
    45            variant={state === 0.25 ? 'solid' : 'outline'}
    46            onClick={() => setState(0.25)}
    47          >
    48            {t('menu.sometimesFeelSo')}
    49          </Button>
    50  
    51          <Button
    52            colorScheme="orange"
    53            leftIcon={state === 0.75 ? <AiOutlineCheck /> : undefined}
    54            variant={state === 0.75 ? 'solid' : 'outline'}
    55            onClick={() => setState(0.75)}
    56          >
    57            {t('menu.oftenFeelSo')}
    58          </Button>
    59  
    60          <Button
    61            colorScheme="red"
    62            leftIcon={state === 1 ? <AiOutlineCheck /> : undefined}
    63            variant={state === 1 ? 'solid' : 'outline'}
    64            onClick={() => setState(1)}
    65          >
    66            {t('menu.stronglyFeelSo')}
    67          </Button>
    68        </SimpleGrid>
    69      </FormControl>
    70    );
    71  };
    72  
    73  export default memo(AnswerInput);