1import React, { useState } from "react";
 2import TextField from "@material-ui/core/TextField";
 3import { useTranslation } from "react-i18next";
 4import { makeStyles } from "@material-ui/core/styles";
 5import Divider from "@material-ui/core/Divider";
 6
 7const Input = ({ addPassenger }) => {
 8  const classes = useStyles();
 9  const [name, setName] = useState("");
10  const { t } = useTranslation();
11
12  const onSave = () => {
13    if (!!name) {
14      addPassenger(name);
15      setName("");
16    }
17  };
18
19  const onKeyDown = (e) => {
20    if (e.keyCode === 13) onSave();
21  };
22
23  return (
24    <>
25      <div className={classes.container}>
26        <TextField
27          value={name}
28          onChange={(e) => setName(e.target.value)}
29          onKeyDown={onKeyDown}
30          fullWidth
31          label={t("car.passengers.add")}
32          id="NewPassenger"
33          name="passenger"
34        />
35      </div>
36      <Divider />
37    </>
38  );
39};
40
41const useStyles = makeStyles((theme) => ({
42  container: { padding: theme.spacing(0, 2, 2) },
43}));
44
45export default Input;