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