packages/components/containers/illustration/IllustrationPlaceholder.tsx

   1 import type { ReactNode } from 'react';
   2
   3 import clsx from '@proton/utils/clsx';
   4
   5 interface Props {
   6     className?: string;
   7     height?: number;
   8     illustrationClassName?: string;
   9     title?: string;
  10     url: string;
  11     uppercase?: boolean;
  12     children?: ReactNode;
  13     titleSize?: 'regular' | 'big';
  14 }
  15
  16 const IllustrationPlaceholder = ({
  17     className,
  18     height,
  19     illustrationClassName,
  20     title,
  21     url,
  22     uppercase,
  23     children,
  24     titleSize = 'big',
  25 }: Props) => {
  26     return (
  27         <div className={clsx('flex *:min-size-auto flex-column flex-nowrap items-center w-full', className)}>
  28             <img src={url} alt={title} className={clsx('p-1 mb-4', illustrationClassName)} height={height} />
  29             {!!title && (
  30                 <h1
  31                     className={clsx(
  32                         'text-bold text-rg mb-1',
  33                         titleSize === 'regular' && 'text-rg',
  34                         titleSize === 'big' && 'text-4xl',
  35                         uppercase && 'text-uppercase'
  36                     )}
  37                 >
  38                     {title}
  39                 </h1>
  40             )}
  41             {children}
  42         </div>
  43     );
  44 };
  45
  46 export default IllustrationPlaceholder;