applications/calendar/src/app/components/eventModal/inputs/DayCheckbox.tsx

   1 import type { InputButtonProps } from '@proton/components';
   2 import { InputButton, Tooltip } from '@proton/components';
   3 import clsx from '@proton/utils/clsx';
   4
   5 interface Props extends Omit<InputButtonProps, 'title'> {
   6     id: string;
   7     dayLong: string;
   8     dayAbbreviation: string;
   9     disabled?: boolean;
  10 }
  11
  12 const DayCheckbox = ({ id, dayAbbreviation, dayLong, disabled = false, ...rest }: Props) => {
  13     return (
  14         <Tooltip title={dayLong}>
  15             <div className={clsx(disabled && 'cursor-default')}>
  16                 <InputButton
  17                     labelProps={{ className: clsx('mt-2', disabled && 'pointer-events-none') }}
  18                     ButtonLikeProps={{ className: 'px-0' }}
  19                     {...rest}
  20                 >
  21                     <span aria-hidden="true">{dayAbbreviation}</span>
  22                     <span className="sr-only">{dayLong}</span>
  23                 </InputButton>
  24             </div>
  25         </Tooltip>
  26     );
  27 };
  28
  29 export default DayCheckbox;