1
 2import { HStack, Input, Tooltip, Box, Switch, FormControl, FormLabel } from '@chakra-ui/react';
 3import { TFunction } from 'i18next';
 4import { Controller } from 'react-hook-form';
 5
 6interface NameFieldProps {
 7  form: any;
 8  isEditing: boolean;
 9  t: TFunction<'translation', undefined, 'translation'>;
10  disabled: boolean;
11}
12
13export const NameField = ({ form, isEditing, t, disabled }: NameFieldProps) => {
14  return (
15    <FormControl mb={'10px'}>
16      <FormLabel>{t('name')}</FormLabel>
17      <HStack>
18        <Input
19          size="sm"
20          type="text"
21          borderRadius="6px"
22          error={form.formState.errors.name?.message}
23          disabled={disabled}
24          {...form.register('name')}
25        />
26        {isEditing && (
27          <HStack px={1}>
28            <Controller
29              name="status"
30              control={form.control}
31              render={({ field }) => {
32                return (
33                  <Tooltip
34                    placement="top"
35                    label={'status: ' + field.value}
36                    textTransform="capitalize"
37                  >
38                    <Box>
39                      <Switch
40                        colorScheme="primary"
41                        disabled={
42                          field.value !== 'active' &&
43                          field.value !== 'disabled'
44                        }
45                        isChecked={field.value === 'active'}
46                        onChange={(e) => {
47                          if (e.target.checked) {
48                            field.onChange('active');
49                          } else {
50                            field.onChange('disabled');
51                          }
52                        }}
53                      />
54                    </Box>
55                  </Tooltip>
56                );
57              }}
58            />
59          </HStack>
60        )}
61      </HStack>
62    </FormControl>
63  )
64}