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

import React from 'react';

import Button from '../Button';
import Icon from '../Icon';
import ExpansionPanel from '../ExpansionPanel';

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

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

const CreateForm: React.FunctionComponent<Props> = ({
  onClick,
  sidebarState,
}) => {
  return (
    <ExpansionPanel
      label={
        <Button shouldFitContainer align="left" onClick={() => { onClick('create-form'); }}>
          <Icon glyph="create-form" style={{marginRight: '10px'}}/>
          Create Form
        </Button>
      }
      isActive={sidebarState === 'create-form'}
    >
      <BtnWrapper>
        <Button shouldFitContainer align="left">
          <Icon glyph="text-field" style={{marginRight: '10px'}}/>
          Text Field
        </Button>
      </BtnWrapper>
      <BtnWrapper>
        <Button shouldFitContainer align="left">
          <Icon glyph="checkbox" style={{marginRight: '10px'}}/>
          Check box
        </Button>
      </BtnWrapper>
      <BtnWrapper>
        <Button shouldFitContainer align="left">
          <Icon glyph="radio-button" style={{marginRight: '10px'}}/>
          Radio Button
        </Button>
      </BtnWrapper>
    </ExpansionPanel>
  );
};

export default CreateForm;