packages/components/containers/autoReply/AutoReplyForm/fields/DayOfMonthField.tsx

   1 import type { ChangeEvent } from 'react';
   2
   3 import Select from '@proton/components/components/select/Select';
   4
   5 import SettingsLayout from '../../../account/SettingsLayout';
   6 import SettingsLayoutLeft from '../../../account/SettingsLayoutLeft';
   7 import SettingsLayoutRight from '../../../account/SettingsLayoutRight';
   8 import { getDaysOfMonthOptions } from '../../utils';
   9
  10 interface Props {
  11     id: string;
  12     label: string;
  13     value?: number;
  14     onChange: (day: number) => void;
  15 }
  16
  17 const DayOfMonthField = ({ id, label, value, onChange }: Props) => {
  18     const handleChange = ({ target }: ChangeEvent<HTMLSelectElement>) => onChange(+target.value);
  19
  20     return (
  21         <SettingsLayout>
  22             <SettingsLayoutLeft>
  23                 <label htmlFor={id} className="text-semibold">
  24                     {label}
  25                 </label>
  26             </SettingsLayoutLeft>
  27             <SettingsLayoutRight>
  28                 <Select id={id} options={getDaysOfMonthOptions()} value={value} onChange={handleChange} />
  29             </SettingsLayoutRight>
  30         </SettingsLayout>
  31     );
  32 };
  33
  34 export default DayOfMonthField;