packages/components/containers/organization/groups/NewGroupMemberItem.tsx

   1 import { c } from 'ttag';
   2
   3 import { Button } from '@proton/atoms';
   4 import Badge from '@proton/components/components/badge/Badge';
   5 import Icon from '@proton/components/components/icon/Icon';
   6
   7 import type { NewGroupMember } from './EditGroup';
   8 import { GroupMemberItemWrapper } from './components/GroupMemberItemWrapper';
   9
  10 interface Props {
  11     member: NewGroupMember;
  12     handleRemoveNewMember: (memberToRemove: NewGroupMember) => void;
  13     submitting?: boolean;
  14 }
  15
  16 export const NewGroupMemberItem = ({ member, handleRemoveNewMember, submitting }: Props) => {
  17     const { Name, Address, GroupMemberType } = member;
  18
  19     return (
  20         <>
  21             <GroupMemberItemWrapper memberEmail={Address} memberName={Name} groupMemberType={GroupMemberType}>
  22                 {!submitting ? (
  23                     <Button
  24                         shape="ghost"
  25                         size="small"
  26                         icon
  27                         onClick={() => {
  28                             handleRemoveNewMember(member);
  29                         }}
  30                         title={c('Action').t`Delete member`}
  31                     >
  32                         <Icon name="cross" size={5} alt={c('Action').t`Delete member`} />
  33                     </Button>
  34                 ) : (
  35                     <div className="flex flex-column flex-nowrap self-center">
  36                         <span>
  37                             <Badge
  38                                 type="info"
  39                                 className="rounded-sm"
  40                                 tooltip={c('tooltip').t`Sending member invitation`}
  41                             >{c('invitation status').t`Sending invite...`}</Badge>
  42                         </span>
  43                     </div>
  44                 )}
  45             </GroupMemberItemWrapper>
  46         </>
  47     );
  48 };