applications/drive/src/app/components/modals/FilesRecoveryModal/FilesRecoveryState.tsx

   1 import { c } from 'ttag';
   2
   3 import { Button } from '@proton/atoms';
   4 import { Alert, ModalTwoContent, ModalTwoFooter, ModalTwoHeader, PrimaryButton } from '@proton/components';
   5 import keyAndFileSvg from '@proton/styles/assets/img/illustrations/file-recovery.svg';
   6
   7 interface Props {
   8     onRecovery: () => void;
   9     onClose?: () => void;
  10     recovering?: boolean;
  11 }
  12
  13 const FilesRecoveryState = ({ onRecovery, onClose, recovering }: Props) => {
  14     const title = c('Title').t`Restore your files`;
  15
  16     return (
  17         <>
  18             <ModalTwoHeader title={c('Title').t`File recovery process`} closeButtonProps={{ disabled: recovering }} />
  19             <ModalTwoContent>
  20                 <div className="p-4 flex w-full">
  21                     <img src={keyAndFileSvg} alt={title} className="w-1/2 m-auto" />
  22                 </div>
  23                 <Alert className="my-4">
  24                     <div>{c('Info').jt`Would you like to restore your files?`}</div>
  25                     <div>{c('Info').jt`Recovery process might take some time.`}</div>
  26                 </Alert>
  27             </ModalTwoContent>
  28             <ModalTwoFooter>
  29                 <div className="flex justify-space-between w-full flex-nowrap">
  30                     <Button
  31                         disabled={recovering}
  32                         autoFocus
  33                         className="min-w-custom"
  34                         style={{ '--min-w-custom': '7em' }}
  35                         onClick={onClose}
  36                     >{c('Action').t`Cancel`}</Button>
  37                     <PrimaryButton
  38                         loading={recovering}
  39                         className="min-w-custom"
  40                         style={{ '--min-w-custom': '7em' }}
  41                         onClick={onRecovery}
  42                     >
  43                         {c('Action').t`Start recovering`}
  44                     </PrimaryButton>
  45                 </div>
  46             </ModalTwoFooter>
  47         </>
  48     );
  49 };
  50
  51 export default FilesRecoveryState;