packages/pass/components/Layout/Card/CardContent.tsx

   1 import type { FC, ReactNode } from 'react';
   2
   3 import { Icon, type IconName, type IconProps } from '@proton/components';
   4 import clsx from '@proton/utils/clsx';
   5
   6 import './CardContent.scss';
   7
   8 export type CardContentProps = {
   9     actions?: ReactNode;
  10     className?: string;
  11     ellipsis?: boolean;
  12     icon?: IconName | (() => ReactNode);
  13     iconProps?: Partial<IconProps>;
  14     subtitle?: ReactNode;
  15     subtitleClassname?: string;
  16     title: ReactNode;
  17     titleClassname?: string;
  18 };
  19
  20 export const CardContent: FC<CardContentProps> = ({
  21     actions,
  22     className,
  23     ellipsis,
  24     icon,
  25     iconProps,
  26     subtitle,
  27     subtitleClassname,
  28     title,
  29     titleClassname,
  30 }) => (
  31     <div className={clsx('pass-card--content flex items-center flex-nowrap w-full gap-4 text-sm', className)}>
  32         {typeof icon === 'function' ? icon() : icon && <Icon name={icon} size={5} {...iconProps} />}
  33         <div className="flex flex-column flex-nowrap justify-start w-full text-left">
  34             <span className={clsx('pass-card-content--title', ellipsis && 'text-ellipsis', titleClassname)}>
  35                 {title}
  36             </span>
  37             {subtitle && (
  38                 <span className={clsx('pass-card-content--subtitle', ellipsis && 'text-ellipsis', subtitleClassname)}>
  39                     {subtitle}
  40                 </span>
  41             )}
  42         </div>
  43         {actions && <div className="shrink-0">{actions}</div>}
  44     </div>
  45 );