RoyLiu
/
pdf-reader-web


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
							import React from 'react';

import Icon from '../Icon';
import Drawer from '../Drawer';
import Typography from '../Typography';
import Divider from '../Divider';

import {
  AnnotationBox, PageNumber, Content, Info,
} from './styled';
import { Separator } from '../../global/otherStyled';
import {
  Wrapper, Head, Body, IconWrapper,
} from '../../global/sidebarStyled';

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

const Annotations: React.FunctionComponent<Props> = ({
  isActive = false,
  close,
}: Props) => (
  <Drawer anchor="right" open={isActive}>
    <Wrapper>
      <Head>
        <IconWrapper>
          <Icon glyph="right-back" onClick={close} />
        </IconWrapper>
        <Separator />
        <IconWrapper>
          <Icon glyph="sort" />
        </IconWrapper>
        <IconWrapper>
          <Icon glyph="annotation-export" />
        </IconWrapper>
        <IconWrapper>
          <Icon glyph="import" />
        </IconWrapper>
      </Head>
      <Body>
        <Typography light>2 Annotations</Typography>
        <Divider orientation="horizontal" />
        <PageNumber>Page 1</PageNumber>
        <AnnotationBox>
          <Content>
            If the Photographer fails to appear at the place and time specified above,
            the deposit shall be refunded to the Client.
          </Content>
          <Info>
            Gameboy
            <Separator />
            2016/07/28 18:18
          </Info>
        </AnnotationBox>
      </Body>
    </Wrapper>
  </Drawer>
);

export default Annotations;