packages/components/containers/topBanners/TopBanner.tsx

   1 import type { ReactNode } from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { Button } from '@proton/atoms';
   6 import Icon from '@proton/components/components/icon/Icon';
   7 import { isElectronOnMac } from '@proton/shared/lib/helpers/desktop';
   8 import clsx from '@proton/utils/clsx';
   9
  10 interface Props {
  11     children: ReactNode;
  12     className?: string;
  13     onClose?: () => void;
  14     'data-testid'?: string;
  15 }
  16
  17 const TopBanner = ({ children, className, onClose, ...rest }: Props) => {
  18     return (
  19         <div
  20             role="alert"
  21             className={clsx([
  22                 'flex shrink-0 flex-nowrap text-center relative text-bold no-print',
  23                 className,
  24                 isElectronOnMac && 'pt-4',
  25             ])}
  26             {...rest}
  27         >
  28             <div className="flex-1 p-2">{children}</div>
  29             {onClose ? (
  30                 <Button
  31                     icon
  32                     shape="ghost"
  33                     className="shrink-0 rounded-none"
  34                     onClick={onClose}
  35                     title={c('Action').t`Close this banner`}
  36                 >
  37                     <Icon name="cross" alt={c('Action').t`Close this banner`} />
  38                 </Button>
  39             ) : null}
  40         </div>
  41     );
  42 };
  43
  44 export default TopBanner;