packages/pass/components/Account/UserPanel.tsx

   1 import type { FC, ReactNode } from 'react';
   2
   3 import Avatar from '@proton/atoms/Avatar/Avatar';
   4 import { Icon } from '@proton/components';
   5 import { UpgradeButton } from '@proton/pass/components/Layout/Button/UpgradeButton';
   6 import { UpsellRef } from '@proton/pass/constants';
   7 import { isPaidPlan } from '@proton/pass/lib/user/user.predicates';
   8 import { UserPassPlan } from '@proton/pass/types/api/plan';
   9 import clsx from '@proton/utils/clsx';
  10
  11 type Props = {
  12     actions?: ReactNode;
  13     email: string;
  14     name: string;
  15     organization?: string;
  16     plan?: UserPassPlan;
  17     planName?: string;
  18 };
  19
  20 export const UserPanel: FC<Props> = ({ actions, email, name, organization, plan, planName }) => {
  21     const emailOnly = planName !== undefined;
  22     const avatar = (name || email)?.toUpperCase()?.[0];
  23
  24     return (
  25         <div className={clsx('flex flex-nowrap gap-2 items-center text-sm', plan && isPaidPlan(plan) && 'ui-orange')}>
  26             <Avatar className="shrink-0">{avatar}</Avatar>
  27             <div className="text-left flex-1">
  28                 <span className="color-norm block text-ellipsis">{emailOnly ? email : name}</span>
  29                 {!emailOnly && <span className="color-weak block text-ellipsis">{email}</span>}
  30
  31                 {planName && (
  32                     <div
  33                         className="flex flex-nowrap gap-1 items-center text-sm text-ellipsis"
  34                         style={{ color: 'var(--interaction-norm)' }}
  35                     >
  36                         <Icon name="star" className="shrink-0" size={3} color="var(--interaction-norm)" />
  37                         <span className="text-ellipsis">
  38                             {planName}
  39                             {organization && ` · ${organization}`}
  40                         </span>
  41                         {plan === UserPassPlan.FREE && (
  42                             <>
  43                                 {' · '}
  44                                 <UpgradeButton
  45                                     upsellRef={UpsellRef.MENU}
  46                                     hideIcon
  47                                     inline
  48                                     style={{ pointerEvents: 'auto' }}
  49                                 />
  50                             </>
  51                         )}
  52                     </div>
  53                 )}
  54             </div>
  55
  56             {actions && <div className="shrink-0">{actions}</div>}
  57         </div>
  58     );
  59 };