packages/components/containers/contacts/widget/MergeContactBanner.tsx

   1 import { c, msgid } from 'ttag';
   2
   3 import { InlineLinkButton } from '@proton/atoms';
   4
   5 interface Props {
   6     onMerge: () => void;
   7     countMergeableContacts: number;
   8 }
   9
  10 const MergeContactBanner = ({ onMerge, countMergeableContacts }: Props) => {
  11     const mergeAction = (
  12         <InlineLinkButton
  13             className="ml-1"
  14             onClick={onMerge}
  15             key="mergeAction"
  16             data-testid="contacts:merge-contacts-button"
  17         >{c('Action').t`Merge`}</InlineLinkButton>
  18     );
  19
  20     const mergeText = c('Success').ngettext(
  21         msgid`${countMergeableContacts} contact look identical.`,
  22         `${countMergeableContacts} contacts look identical.`,
  23         countMergeableContacts
  24     );
  25
  26     return (
  27         <div className="px-4 py-2 text-sm bg-weak border-bottom">
  28             <span>
  29                 {mergeText}
  30                 {mergeAction}
  31             </span>
  32         </div>
  33     );
  34 };
  35
  36 export default MergeContactBanner;