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

import React from 'react';

import Icon from '../Icon';
import Button from '../Button';
import Typography from '../Typography';
import ExpansionPanel from '../ExpansionPanel';
import Sliders from '../Sliders';
import ColorSelect from '../ColorSelector';
import SelectBox from '../SelectBox';

import {
  Wrapper, Group, Item, SliderWrapper,
} from '../../global/toolStyled';

import { fontOptions, sizeOptions } from './data';

type Props = {
  isActive: boolean;
  onClick: () => void;
};

const TextTools: React.FunctionComponent<Props> = ({
  isActive,
  onClick,
}: Props) => (
  <ExpansionPanel
    label={(
      <Button
        shouldFitContainer
        align="left"
        onClick={onClick}
        isActive={isActive}
      >
        <Icon glyph="text" style={{ marginRight: '10px' }} />
        Text
      </Button>
    )}
    isActive={isActive}
  >
    <Wrapper>
      <Typography variant="subtitle" style={{ marginTop: '8px' }}>Fonts</Typography>
      <Group>
        <SelectBox options={fontOptions} />
        <Item size="small">
          <Icon glyph="bold" />
        </Item>
        <Item size="small">
          <Icon glyph="italic" />
        </Item>
      </Group>
    </Wrapper>
    <Wrapper width="40%">
      <Typography variant="subtitle" style={{ marginTop: '8px' }}>Size</Typography>
      <Group>
        <SelectBox options={sizeOptions} />
      </Group>
    </Wrapper>
    <Wrapper width="60%">
      <Typography variant="subtitle" style={{ marginTop: '8px' }}>Align</Typography>
      <Group>
        <Item size="small">
          <Icon glyph="align-left" />
        </Item>
        <Item size="small">
          <Icon glyph="align-center" />
        </Item>
        <Item size="small">
          <Icon glyph="align-right" />
        </Item>
      </Group>
    </Wrapper>
    <Wrapper>
      <ColorSelect showTitle color="" onClick={(): void => {}} />
    </Wrapper>
    <Wrapper>
      <Typography variant="subtitle" style={{ marginTop: '8px' }}>Opacity</Typography>
      <Group>
        <SliderWrapper>
          <Sliders />
        </SliderWrapper>
        40%
      </Group>
    </Wrapper>
  </ExpansionPanel>
);

export default TextTools;