packages/components/containers/credentialLeak/BreachTitle.tsx

   1 import clsx from '@proton/utils/clsx';
   2
   3 import ReadableDate from './ReadableDate';
   4 import { getBreachIcon } from './helpers';
   5
   6 interface BreachTitleProps {
   7     name: string;
   8     createdAt: string;
   9     style: {
  10         iconAltText: string;
  11     };
  12     className?: string;
  13     inModal?: boolean;
  14     severity: number;
  15     resolved: boolean;
  16 }
  17
  18 const BreachTitle = ({ name, createdAt, style, className, inModal = false, severity, resolved }: BreachTitleProps) => {
  19     const { iconAltText } = style;
  20
  21     const breachIcon = getBreachIcon(severity, { resolved });
  22
  23     return (
  24         <span className={clsx('flex flex-nowrap items-start', className)}>
  25             <span className={clsx('ratio-square rounded flex w-custom relative')} style={{ '--w-custom': '3rem' }}>
  26                 <img src={breachIcon} className="m-auto w-full h-full" alt={iconAltText} />
  27             </span>
  28             <span className="flex-1 text-left pl-2 pr-1">
  29                 {inModal ? (
  30                     <div className="inline-flex items-center">
  31                         <span className="block text- mr-1">{name}</span>
  32                     </div>
  33                 ) : (
  34                     <div className="flex flex-nowrap items-center">
  35                         <h3 className="block text-bold">{name}</h3>
  36                     </div>
  37                 )}
  38                 <ReadableDate
  39                     value={createdAt}
  40                     className={clsx('block m-0 color-weak text-normal', inModal ? 'text-xs' : 'text-sm')}
  41                     dateInBold
  42                     displayInfoText
  43                 />
  44             </span>
  45         </span>
  46     );
  47 };
  48
  49 export default BreachTitle;