packages/components/containers/contacts/lists/ContactRowItem.tsx

   1 import type { ReactNode } from 'react';
   2
   3 import clsx from '@proton/utils/clsx';
   4
   5 interface ContactRowItemFirstLineProps {
   6     ID: string;
   7     Name: string;
   8     className?: string;
   9 }
  10
  11 export const ContactRowItemFirstLine = ({ ID, Name, className }: ContactRowItemFirstLineProps) => {
  12     return (
  13         <div className="flex flex-nowrap items-center item-firstline max-w-full">
  14             <div className={clsx('flex flex-1 w-0', className)}>
  15                 <span role="heading" aria-level={2} className="text-bold inline-block max-w-full text-ellipsis" id={ID}>
  16                     {Name}
  17                 </span>
  18             </div>
  19         </div>
  20     );
  21 };
  22
  23 interface ContactRowItemSecondLineProps {
  24     title: string;
  25     children: ReactNode;
  26 }
  27 export const ContactRowItemSecondLine = ({ title, children }: ContactRowItemSecondLineProps) => {
  28     return (
  29         <div className="item-secondline max-w-full text-ellipsis text-sm" title={title}>
  30             {children}
  31         </div>
  32     );
  33 };