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

import React from 'react';

import Dialog from '../Dialog';
import Button from '../Button';

import {
  TextWrapper, BtnWrapper,
} from './styled';

type Props = {
  open: boolean;
  onCancel: (e: any) => void;
  onDelete: (e: any) => void;
};

const index: React.FunctionComponent<Props> = ({
  open,
  onCancel,
  onDelete,
}: Props) => (
  <Dialog open={open}>
    <TextWrapper>
      This will permanently delete the annotation. Do you want to continue?
    </TextWrapper>
    <BtnWrapper>
      <Button
        appearance="default-hollow"
        onClick={onCancel}
      >
        Cancel
      </Button>
      <Button
        appearance="primary"
        onClick={onDelete}
        style={{ marginLeft: '16px' }}
      >
        OK
      </Button>
    </BtnWrapper>
  </Dialog>
);

export default index;