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

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