1import React, {useState} from 'react';
 2import Box from '@material-ui/core/Box';
 3import TextField from '@material-ui/core/TextField';
 4import IconButton from '@material-ui/core/IconButton';
 5import Divider from '@material-ui/core/Divider';
 6import Icon from '@material-ui/core/Icon';
 7import {useTranslation} from 'react-i18next';
 8
 9const Input = ({addPassenger}) => {
10  const [name, setName] = useState('');
11  const {t} = useTranslation();
12
13  const onSave = () => {
14    if (!!name) {
15      addPassenger(name);
16      setName('');
17    }
18  };
19
20  const onKeyDown = e => {
21    if (e.keyCode === 13) onSave();
22  };
23
24  return (
25    <Box pb={1}>
26      <Box display="flex" flexDirection="row" alignItems="center" px={2} pb={2}>
27        <TextField
28          value={name}
29          onChange={e => setName(e.target.value)}
30          onKeyDown={onKeyDown}
31          fullWidth
32          label={t('car.passengers.add')}
33          id="NewPassenger"
34          name="passenger"
35        />
36        <IconButton edge="end" size="small" disabled={!name} onClick={onSave}>
37          <Icon>check</Icon>
38        </IconButton>
39      </Box>
40      <Divider />
41    </Box>
42  );
43};
44
45export default Input;