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