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>
25            <Icon className={classes.labelIcon}>
26              person
27            </Icon>{' '}
28            {t('travel.passengers.name')}
29          </Typography>
30        </label>
31        <TextField
32          id="PassengerName"
33          name="name"
34          value={name}
35          onChange={e => setName(e.target.value)}
36          variant="outlined"
37          size="small"
38          fullWidth
39          label=""
40          placeholder={t('travel.passengers.name_placeholder')}
41        />
42      </Box>
43      <Box className={classes.inputBox}>
44        <label htmlFor="email">
45          <Typography>
46            <Icon className={classes.labelIcon}>
47              mail_outlined
48            </Icon>{' '}
49            {t('travel.passengers.email')}
50          </Typography>
51        </label>
52        <TextField
53          id="PassengerEmail"
54          name="email"
55          value={email}
56          onChange={e => setEmail(e.target.value)}
57          variant="outlined"
58          size="small"
59          fullWidth
60          label=""
61          placeholder={t('travel.passengers.email_placeholder')}
62        />
63      </Box>
64    </Fragment>
65  );
66};
67
68export default AddPassengerCommonFields;