packages/components/containers/credentialLeak/BreachListItem.tsx

   1 import { Button } from '@proton/atoms';
   2 import type { FetchedBreaches } from '@proton/components/containers/credentialLeak/models';
   3 import clsx from '@proton/utils/clsx';
   4
   5 import ReadableDate from './ReadableDate';
   6 import { getBreachIcon } from './helpers';
   7
   8 import './BreachListItem.scss';
   9
  10 interface Props {
  11     data: FetchedBreaches;
  12     handleClick?: () => void;
  13     disabled?: boolean;
  14     selected?: boolean;
  15     style: {
  16         iconAltText: string;
  17     };
  18     resolved?: boolean;
  19     unread?: boolean;
  20     hasMultipleAddresses?: boolean;
  21 }
  22
  23 const BreachListItem = ({
  24     data,
  25     handleClick,
  26     disabled,
  27     selected,
  28     style,
  29     resolved = false,
  30     unread = false,
  31     hasMultipleAddresses,
  32 }: Props) => {
  33     const { name, email, createdAt, severity, exposedData } = data;
  34     const { iconAltText } = style;
  35
  36     const breachIcon = getBreachIcon(severity, { resolved });
  37
  38     return (
  39         <li className="mb-1">
  40             <Button
  41                 className={clsx(
  42                     'w-full px-4 py-3 border-none',
  43                     selected ? 'breach-list-item-selected' : '',
  44                     disabled ? 'pointer-events-none' : ''
  45                 )}
  46                 onClick={handleClick}
  47             >
  48                 <span className="flex flex-nowrap items-start">
  49                     <span className="flex w-custom relative" style={{ '--w-custom': '1.875rem' }}>
  50                         <img src={breachIcon} className="m-auto w-full h-full" alt={iconAltText} />
  51                     </span>
  52                     <span className="flex-1 text-left pl-2 pr-1">
  53                         <span className={clsx('block max-w-full text-ellipsis', unread && 'text-bold')}>{name}</span>
  54                         {hasMultipleAddresses && (
  55                             <span
  56                                 className={clsx(
  57                                     'block max-w-full text-ellipsis color-weak text-sm',
  58                                     unread && 'text-bold'
  59                                 )}
  60                                 title={email}
  61                             >
  62                                 {email}
  63                             </span>
  64                         )}
  65                         <ReadableDate
  66                             value={createdAt}
  67                             className={clsx(
  68                                 'block max-w-full text-ellipsis m-0 text-sm color-weak',
  69                                 unread && 'text-bold'
  70                             )}
  71                         />
  72                         <div className="text-ellipsis mt-1">
  73                             {exposedData?.map((data) => {
  74                                 return (
  75                                     <span className="pr-2 inline-block" key={`${data.code}${data.name}`}>
  76                                         <span className="text-sm rounded-full bg-norm border inline-block px-3 py-0.5">
  77                                             {data.name}
  78                                         </span>
  79                                     </span>
  80                                 );
  81                             })}
  82                         </div>
  83                     </span>
  84                 </span>
  85             </Button>
  86         </li>
  87     );
  88 };
  89
  90 export default BreachListItem;