77 lines
1.5 KiB
TypeScript
77 lines
1.5 KiB
TypeScript
import {
|
|
Dialog,
|
|
DialogActions,
|
|
DialogContent,
|
|
DialogTitle,
|
|
Button,
|
|
TextField,
|
|
} from "@mui/material";
|
|
import { useForm, SubmitHandler } from "react-hook-form";
|
|
|
|
interface FormValues {
|
|
city: string;
|
|
}
|
|
|
|
const AddStationLocationModal = ({
|
|
open,
|
|
handleClose,
|
|
handleAddStation,
|
|
}: any) => {
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
reset,
|
|
formState: { errors },
|
|
} = useForm<FormValues>();
|
|
|
|
const onSubmit: SubmitHandler<FormValues> = (data) => {
|
|
handleAddStation(data);
|
|
reset();
|
|
handleClose();
|
|
};
|
|
|
|
return (
|
|
<Dialog open={open} onClose={handleClose}>
|
|
<DialogTitle>Search Near By Stations</DialogTitle>
|
|
<DialogContent>
|
|
<form onSubmit={handleSubmit(onSubmit)}>
|
|
<TextField
|
|
{...register("city", {
|
|
required: "City name is required",
|
|
minLength: {
|
|
value: 2,
|
|
message:
|
|
"City name must be at least 2 characters",
|
|
},
|
|
})}
|
|
label="City Name"
|
|
fullWidth
|
|
margin="normal"
|
|
error={!!errors.city}
|
|
helperText={errors.city?.message}
|
|
/>
|
|
<DialogActions>
|
|
<Button onClick={handleClose} color="secondary">
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
type="submit"
|
|
sx={{
|
|
backgroundColor: "#52ACDF",
|
|
color: "white",
|
|
borderRadius: "8px",
|
|
width: "100px",
|
|
"&:hover": { backgroundColor: "#439BC1" },
|
|
}}
|
|
>
|
|
Search Station
|
|
</Button>
|
|
</DialogActions>
|
|
</form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|
|
|
|
export default AddStationLocationModal;
|