1import {Fragment} from 'react';
 2import TextField from '@material-ui/core/TextField';
 3import {useTranslation} from 'react-i18next';
 4import Icon from '@material-ui/core/Icon';
 5import Box from '@material-ui/core/Box';
 6import Typography from '@material-ui/core/Typography';
 7import useStyles from './useStyles';
 8
 9interface Props {
10  name: string;
11  setName: (name: string) => void;
12  email: string;
13  setEmail: (email: string) => void;
14}
15
16const AddPassengerCommonFields = ({name, setName, email, setEmail}: Props) => {
17  const {t} = useTranslation();
18  const classes = useStyles();
19
20  return (
21    <Fragment>
22      <Box className={classes.inputBox}>
23        <label htmlFor="name">
24          <Typography className={classes.label}>
25            <Icon className={classes.labelIcon}>person</Icon>{' '}
26            {t('travel.passengers.name')}
27          </Typography>
28        </label>
29        <TextField
30          id="PassengerName"
31          name="name"
32          value={name}
33          onChange={e => setName(e.target.value)}
34          variant="outlined"
35          size="small"
36          fullWidth
37          label=""
38          placeholder={t('travel.passengers.name_placeholder')}
39        />
40      </Box>
41      <Box className={classes.inputBox}>
42        <label htmlFor="email">
43          <Typography className={classes.label}>
44            <Icon className={classes.labelIcon}>mail_outlined</Icon>{' '}
45            {t('travel.passengers.email')}
46          </Typography>
47        </label>
48        <TextField
49          id="PassengerEmail"
50          name="email"
51          value={email}
52          onChange={e => setEmail(e.target.value)}
53          variant="outlined"
54          size="small"
55          fullWidth
56          label=""
57          placeholder={t('travel.passengers.email_placeholder')}
58        />
59      </Box>
60    </Fragment>
61  );
62};
63
64export default AddPassengerCommonFields;