packages/components/containers/logs/UserCell.tsx

   1 import { Avatar } from '@proton/atoms';
   2 import { getInitials } from '@proton/shared/lib/helpers/string';
   3 import clsx from '@proton/utils/clsx';
   4
   5 interface Props {
   6     email: string;
   7     name?: string;
   8 }
   9
  10 export const UserCell = ({ email, name }: Props) => {
  11     return (
  12         <div className="flex gap-2">
  13             <Avatar className="shrink-0 text-rg" color="weak">
  14                 {getInitials(name || email)}
  15             </Avatar>
  16             <span className="flex-1 flex flex-column justify-center">
  17                 {name && (
  18                     <span className="block color-norm max-w-full text-ellipsis" title={name}>
  19                         {name}
  20                     </span>
  21                 )}
  22                 <span
  23                     className={clsx('block max-w-full text-ellipsis color-norm', name && 'color-weak text-sm')}
  24                     title={email}
  25                 >
  26                     {email}
  27                 </span>
  28             </span>
  29         </div>
  30     );
  31 };