packages/components/containers/organization/AdministratorList.tsx

   1 import { c, msgid } from 'ttag';
   2
   3 import Collapsible from '@proton/components/components/collapsible/Collapsible';
   4 import CollapsibleContent from '@proton/components/components/collapsible/CollapsibleContent';
   5 import CollapsibleHeader from '@proton/components/components/collapsible/CollapsibleHeader';
   6 import CollapsibleHeaderIconButton from '@proton/components/components/collapsible/CollapsibleHeaderIconButton';
   7 import Icon from '@proton/components/components/icon/Icon';
   8
   9 export const AdministratorItem = ({ name, email }: { name: string; email: string }) => {
  10     return (
  11         <div className="w-full text-ellipsis">
  12             <span className="text-bold" title={name}>
  13                 {name}
  14             </span>{' '}
  15             {email && email !== name && (
  16                 <span className="color-weak" title={email}>
  17                     ({email})
  18                 </span>
  19             )}
  20         </div>
  21     );
  22 };
  23
  24 const AdministratorList = ({
  25     members,
  26     expandByDefault,
  27 }: {
  28     members?: { member: { Name: string; ID: string }; email: string }[] | null;
  29     expandByDefault?: boolean;
  30 }) => {
  31     if (!members?.length) {
  32         return null;
  33     }
  34
  35     const n = members.length;
  36
  37     return (
  38         <Collapsible expandByDefault={expandByDefault}>
  39             <CollapsibleHeader
  40                 disableFullWidth
  41                 suffix={
  42                     <CollapsibleHeaderIconButton size="small" color="norm">
  43                         <Icon name="chevron-down" />
  44                     </CollapsibleHeaderIconButton>
  45                 }
  46             >
  47                 <label className="color-primary">
  48                     {c('Label').ngettext(msgid`Show ${n} administrator`, `Show ${n} administrators`, n)}
  49                 </label>
  50             </CollapsibleHeader>
  51
  52             <CollapsibleContent>
  53                 <div className="border border-weak rounded p-2 flex flex-column gap-1">
  54                     {members.map(({ member, email }) => {
  55                         return <AdministratorItem key={member.ID} name={member.Name} email={email} />;
  56                     })}
  57                 </div>
  58             </CollapsibleContent>
  59         </Collapsible>
  60     );
  61 };
  62
  63 export default AdministratorList;