pdf-reader-web/components/MarkupTools/index.tsx

import React from 'react';

import Button from '../Button';
import ExpansionPanel from '../ExpansionPanel';
import Icon from '../Icon';
import HighlightTools from '../HighlightTools';
import Freehand from '../Freehand';
import TextTools from '../TextTools';
import Shape from '../Shape';

import { BtnWrapper } from '../../global/toolStyled';

type Props = {
  sidebarState: string;
  onClick: (state: string) => void;
};

const MarkupTools: React.FunctionComponent<Props> = ({
  onClick,
  sidebarState,
}: Props) => {
  const handleClick = (): void => {
    onClick('markup-tools');
  };

  return (
    <ExpansionPanel
      label={(
        <Button shouldFitContainer align="left" onClick={handleClick}>
          <Icon glyph="markup-tools" style={{ marginRight: '10px' }} />
          Markup Tools
        </Button>
      )}
      isActive={sidebarState === 'markup-tools'}
    >
      <HighlightTools />
      <Freehand />
      <TextTools />
      <BtnWrapper>
        <Button shouldFitContainer align="left">
          <Icon glyph="sticky-note" style={{ marginRight: '10px' }} />
          Sticky Note
        </Button>
      </BtnWrapper>
      <Shape />
    </ExpansionPanel>
  );
};

export default MarkupTools;