applications/calendar/src/app/components/eventModal/rows/BusyPartipantRowDot.tsx

   1 import type { CSSProperties } from 'react';
   2
   3 import { CircleLoader } from '@proton/atoms';
   4 import { Icon, Tooltip } from '@proton/components';
   5 import clsx from '@proton/utils/clsx';
   6
   7 interface Props {
   8     display: 'loader' | 'half-circle' | 'circle' | 'bordered-circle';
   9     color: string | undefined;
  10     tooltipText: string;
  11     onClick: () => void;
  12     classname?: string;
  13 }
  14
  15 const BusyParticipantRowDot = ({ color, display, tooltipText, onClick, classname }: Props) => {
  16     if (display === 'loader') {
  17         return (
  18             <Tooltip title={tooltipText}>
  19                 <div className="flex">
  20                     <CircleLoader
  21                         size="tiny"
  22                         className="m-auto"
  23                         style={{ color: color || 'black' }}
  24                         onClick={onClick}
  25                     />
  26                 </div>
  27             </Tooltip>
  28         );
  29     }
  30
  31     const colorStyle = ((): CSSProperties => {
  32         if (display === 'half-circle') {
  33             return {
  34                 backgroundColor: 'transparent',
  35             };
  36         }
  37
  38         if (display === 'bordered-circle') {
  39             return {
  40                 border: `0.0625rem solid ${color}`,
  41             };
  42         }
  43
  44         return {
  45             backgroundColor: color,
  46         };
  47     })();
  48
  49     return (
  50         <Tooltip title={tooltipText}>
  51             <div
  52                 className={clsx('m-auto relative flex rounded-full', classname)}
  53                 style={{
  54                     width: '0.625rem',
  55                     height: '0.625rem',
  56                     ...colorStyle,
  57                 }}
  58                 onClick={onClick}
  59             >
  60                 {display === 'half-circle' && (
  61                     <Icon name={'circle-half-filled'} size={2.5} className={clsx('opacity-70 rotateZ-45')} />
  62                 )}
  63             </div>
  64         </Tooltip>
  65     );
  66 };
  67
  68 export default BusyParticipantRowDot;