github.com/lauslim12/expert-systems@v0.0.0-20221115131159-018513aad29c/web/src/components/Header.tsx (about) 1 import { 2 HStack, 3 IconButton, 4 Link, 5 Spacer, 6 Text, 7 Tooltip, 8 useColorMode, 9 } from '@chakra-ui/react'; 10 import type { ReactElement } from 'react'; 11 import { memo, MouseEventHandler } from 'react'; 12 import { useTranslation } from 'react-i18next'; 13 import { 14 AiFillBook, 15 AiFillBulb, 16 AiFillGithub, 17 AiFillInfoCircle, 18 AiFillZhihuCircle, 19 } from 'react-icons/ai'; 20 21 /** 22 * Will accept a function to open up modals again. 23 */ 24 type Props = { 25 setOpenDisclaimer: () => void; 26 setOpenAbout: () => void; 27 }; 28 29 /** 30 * Stylized icon button to create custom and constant icon button based on props. 31 * 32 * @param params - Set of parameters native for this component 33 * @returns Customized icon button component 34 */ 35 const StylizedIconButton = ({ 36 icon, 37 label, 38 onClick, 39 }: { 40 icon: ReactElement<any, string | React.JSXElementConstructor<any>>; 41 label: string; 42 onClick: MouseEventHandler<HTMLButtonElement>; 43 }) => ( 44 <Tooltip label={label} hasArrow> 45 <IconButton 46 colorScheme="pink" 47 icon={icon} 48 size="sm" 49 aria-label={label} 50 variant="outline" 51 onClick={onClick} 52 /> 53 </Tooltip> 54 ); 55 56 /** 57 * Header component for the whole application. 58 * 59 * @param param - Setter function to open modals 60 * @returns React Functional Component 61 */ 62 const Header = ({ setOpenDisclaimer, setOpenAbout }: Props) => { 63 const { toggleColorMode } = useColorMode(); 64 const { t, i18n } = useTranslation(); 65 66 return ( 67 <HStack as="nav" px={6} py={4} spacing={2}> 68 <Text fontWeight="bold" color="pink.400" fontSize="xl"> 69 ES 70 </Text> 71 72 <Spacer /> 73 74 <StylizedIconButton 75 icon={<AiFillBulb />} 76 label={t('tooltips.color')} 77 onClick={toggleColorMode} 78 /> 79 80 <Link href="https://github.com/lauslim12/expert-systems" isExternal> 81 <StylizedIconButton 82 icon={<AiFillGithub />} 83 label={t('tooltips.github')} 84 onClick={() => null} 85 /> 86 </Link> 87 88 <StylizedIconButton 89 icon={<AiFillInfoCircle />} 90 label={t('tooltips.about')} 91 onClick={setOpenAbout} 92 /> 93 94 <StylizedIconButton 95 icon={<AiFillBook />} 96 label={t('tooltips.terms')} 97 onClick={setOpenDisclaimer} 98 /> 99 100 <StylizedIconButton 101 icon={<AiFillZhihuCircle />} 102 label={t('tooltips.lang')} 103 onClick={() => { 104 if (i18n.language === 'id') { 105 i18n.changeLanguage('en'); 106 return; 107 } 108 109 i18n.changeLanguage('id'); 110 }} 111 /> 112 </HStack> 113 ); 114 }; 115 116 export default memo(Header);