packages/pass/components/Confirmation/ConfirmationPrompt.tsx

   1 import type { FC, ReactNode } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { Button } from '@proton/atoms';
   6 import { Prompt } from '@proton/components';
   7
   8 import './ConfirmationPrompt.scss';
   9
  10 export type ConfirmationPromptHandles = {
  11     onCancel: () => void;
  12     onConfirm: () => void;
  13 };
  14
  15 type Props = ConfirmationPromptHandles & {
  16     confirmText?: string;
  17     danger?: boolean;
  18     message: ReactNode;
  19     title: ReactNode;
  20 };
  21
  22 export const ConfirmationPrompt: FC<Props> = ({ confirmText, danger, message, title, onCancel, onConfirm }) => {
  23     return (
  24         <Prompt
  25             open
  26             className="pass-prompt"
  27             title={<span className="text-break">{title}</span>}
  28             buttons={[
  29                 <Button onClick={onConfirm} color={danger ? 'danger' : 'norm'} pill>
  30                     {confirmText ?? c('Action').t`Confirm`}
  31                 </Button>,
  32                 <Button onClick={onCancel} shape="outline" color="norm" pill>
  33                     {c('Action').t`Cancel`}
  34                 </Button>,
  35             ]}
  36         >
  37             {message}
  38         </Prompt>
  39     );
  40 };