applications/calendar/src/app/components/events/PopoverHeader.tsx

   1 import * as React from 'react';
   2
   3 import { Icon } from '@proton/components';
   4 import clsx from '@proton/utils/clsx';
   5
   6 import PopoverCloseButton from './PopoverCloseButton';
   7
   8 interface Props extends React.ComponentPropsWithRef<'header'> {
   9     children?: React.ReactNode;
  10     actions?: React.ReactNode;
  11     onClose: () => void;
  12     isDraggable?: boolean;
  13 }
  14
  15 const PopoverHeader = ({ children, onClose, actions, className, isDraggable = false, ...rest }: Props) => {
  16     return (
  17         <header className={clsx(['eventpopover-header', className])} {...rest}>
  18             <div className="eventpopover-actions flex justify-end">
  19                 {isDraggable && <Icon name="dots" className="mr-auto my-auto color-weak" />}
  20                 {actions}
  21                 {!!actions && <span className="eventpopover-actions-separator" />}
  22                 <PopoverCloseButton onClose={onClose} />
  23             </div>
  24             {children}
  25         </header>
  26     );
  27 };
  28
  29 export default PopoverHeader;