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

import React from 'react';
import { useTranslation } from 'react-i18next';

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.FC<Props> = ({
  open,
  onCancel,
  onDelete,
}: Props) => {
  const { t } = useTranslation('dialog');

  return (
    <Dialog open={open}>
      <TextWrapper>
        {t('deleteAnnotationAlert')}
      </TextWrapper>
      <BtnWrapper>
        <Button
          appearance="default-hollow"
          onClick={onCancel}
        >
          {t('cancel')}
        </Button>
        <Button
          appearance="primary"
          onClick={onDelete}
          style={{ marginLeft: '16px' }}
        >
          {t('continue')}
        </Button>
      </BtnWrapper>
    </Dialog>
  );
};

export default index;