Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | import { Typography } from "@material-ui/core";
import LocationAutocomplete from "components/LocationAutocomplete";
import { DASHBOARD } from "i18n/namespaces";
import { useRouter } from "next/router";
import { useTranslation } from "next-i18next";
import { HostingStatus } from "proto/api_pb";
import { useForm } from "react-hook-form";
import { routeToSearch } from "routes";
import makeStyles from "utils/makeStyles";
const useStyles = makeStyles((theme) => ({
searchBoxContainer: {
padding: theme.spacing(4, 2, 6, 2),
borderRadius: theme.shape.borderRadius,
backgroundColor: theme.palette.background.paper,
},
}));
export default function HeroSearch() {
const { t } = useTranslation(DASHBOARD);
const classes = useStyles();
const router = useRouter();
const searchInputId = "hero-search-input";
const { control, errors } = useForm({ mode: "onChange" });
return (
<form className={classes.searchBoxContainer}>
<Typography
variant="h2"
component="label"
display="block"
htmlFor={searchInputId}
paragraph
>
{t("search_input_label")}
</Typography>
<LocationAutocomplete
control={control}
name="location"
id={searchInputId}
variant="outlined"
placeholder={t("search_input_placeholder")}
defaultValue={""}
onChange={(value) => {
Iif (value !== "") {
const searchRouteWithSearchQuery = routeToSearch({
location: value.simplifiedName,
hostingStatusOptions: [
HostingStatus.HOSTING_STATUS_CAN_HOST,
HostingStatus.HOSTING_STATUS_MAYBE,
],
bbox: value.bbox,
});
router.push(searchRouteWithSearchQuery);
}
}}
fieldError={errors.location?.message}
disableRegions
/>
</form>
);
}
|