packages/components/containers/recovery/RecoveryCardStatus.tsx

   1 import { ButtonLike } from '@proton/atoms';
   2 import Icon from '@proton/components/components/icon/Icon';
   3 import SettingsLink from '@proton/components/components/link/SettingsLink';
   4
   5 import RecoveryStatusIcon from './RecoveryStatusIcon';
   6 import RecoveryStatusText from './RecoveryStatusText';
   7
   8 export interface RecoveryCardStatusProps {
   9     type: 'info' | 'success' | 'warning' | 'danger';
  10     statusText: string;
  11     callToActions?: {
  12         text: string;
  13         path: string;
  14     }[];
  15 }
  16
  17 const RecoveryCardStatus = ({ type, statusText, callToActions: items = [] }: RecoveryCardStatusProps) => {
  18     return (
  19         <>
  20             <span className="flex items-center flex-nowrap">
  21                 <RecoveryStatusIcon className="shrink-0" type={type} />
  22                 <RecoveryStatusText className="ml-4" type={type}>
  23                     {statusText}
  24                 </RecoveryStatusText>
  25             </span>
  26
  27             {items.length > 0 && (
  28                 <ul className="unstyled ml-14">
  29                     {items.map(({ text, path }) => {
  30                         return (
  31                             <li key={text} className="flex items-center flex-nowrap">
  32                                 <span className="mr-2">{text}</span>
  33                                 <ButtonLike
  34                                     as={SettingsLink}
  35                                     icon
  36                                     path={path}
  37                                     shape="ghost"
  38                                     color="norm"
  39                                     size="small"
  40                                     title={text}
  41                                 >
  42                                     <Icon name="arrow-right" alt={text} />
  43                                 </ButtonLike>
  44                             </li>
  45                         );
  46                     })}
  47                 </ul>
  48             )}
  49         </>
  50     );
  51 };
  52
  53 export default RecoveryCardStatus;