1import { FormControl, FormLabel } from '@chakra-ui/react';
 2import { Input } from 'components/input';
 3import { TFunction } from 'i18next';
 4import { Controller } from 'react-hook-form';
 5
 6
 7interface DataLimitFieldProps {
 8    form: any;
 9    disabled: boolean;
10    t: TFunction<'translation', undefined, 'translation'>;
11}
12
13export const DataLimitField = ({ form, disabled, t }: DataLimitFieldProps) => {
14  return (
15    <FormControl mb={'10px'}>
16      <FormLabel>{t('userDialog.dataLimit')}</FormLabel>
17      <Controller
18        control={form.control}
19        name="data_limit"
20        render={({ field }) => {
21          return (
22            <Input
23              endAdornment="GB"
24              type="number"
25              size="sm"
26              borderRadius="6px"
27              onChange={field.onChange}
28              disabled={disabled}
29              error={
30                form.formState.errors.data_limit?.message
31              }
32              value={field.value ? String(field.value) : ''}
33            />
34          );
35        }}
36      />
37    </FormControl>
38  )
39}