packages/components/containers/members/MemberFeatures.tsx

   1 import { c, msgid } from 'ttag';
   2
   3 import Icon from '@proton/components/components/icon/Icon';
   4 import humanSize from '@proton/shared/lib/helpers/humanSize';
   5 import type { Member, Organization } from '@proton/shared/lib/interfaces';
   6
   7 interface Props {
   8     member: Member;
   9     organization?: Organization;
  10 }
  11
  12 const MemberFeatures = ({ member, organization }: Props) => {
  13     const { UsedSpace, MaxSpace, MaxVPN } = member;
  14
  15     return (
  16         <>
  17             {(organization?.MaxSpace || 0) > 0 ? (
  18                 <span className="mb-2 flex flex-nowrap">
  19                     <span className="shrink-0 flex mt-0.5">
  20                         <Icon name="filing-cabinet" />
  21                     </span>
  22                     <span className="flex-1 pl-1" data-testid="users-and-addresses-table:storage">
  23                         {humanSize({ bytes: UsedSpace, unit: 'GB' })} / {humanSize({ bytes: MaxSpace, unit: 'GB' })}
  24                     </span>
  25                 </span>
  26             ) : null}
  27             {(organization?.MaxVPN || 0) > 0 ? (
  28                 <span className="flex flex-nowrap">
  29                     <span className="shrink-0 flex mt-0.5">
  30                         <Icon name="brand-proton-vpn" />
  31                     </span>
  32                     <span className="flex-1 pl-1" data-testid="users-and-addresses-table:vpnConnections">
  33                         {c('Feature').ngettext(msgid`${MaxVPN} VPN connection`, `${MaxVPN} VPN connections`, MaxVPN)}
  34                     </span>
  35                 </span>
  36             ) : null}
  37         </>
  38     );
  39 };
  40
  41 export default MemberFeatures;