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 | import { ToggleButton, ToggleButtonGroup } from "@mui/material";
import { useTranslation } from "i18n";
import { SEARCH } from "i18n/namespaces";
import { theme } from "theme";
import { MapViewOptions, MapViews } from "./utils/constants";
interface MapViewToggleProps {
mapView: MapViewOptions;
onMapViewChange: (mapView: MapViewOptions) => void;
}
const MapViewToggle = ({ mapView, onMapViewChange }: MapViewToggleProps) => {
const { t } = useTranslation([SEARCH]);
const handleSetMapViewChange = (
event: React.MouseEvent<HTMLElement>,
newMapView: MapViewOptions,
) => {
event?.preventDefault();
onMapViewChange(newMapView);
};
return (
<ToggleButtonGroup
exclusive
onChange={handleSetMapViewChange}
value={mapView}
aria-label={t("search:views.choose_map_view")}
size="medium"
color="primary"
sx={{
borderRadius: "20px",
boxShadow: theme.shadows[4],
backgroundColor: theme.palette.common.white,
}}
>
<ToggleButton
value={MapViews.MAP_AND_LIST}
aria-label={t("search:views.map_and_list")}
sx={{
borderRadius: "20px 0 0 20px",
}}
>
{t("search:views.map_and_list")}
</ToggleButton>
<ToggleButton
value={MapViews.LIST_ONLY}
aria-label={t("search:views.list")}
sx={{ borderRadius: "0 20px 20px 0" }}
>
{t("search:views.list")}
</ToggleButton>
</ToggleButtonGroup>
);
};
export default MapViewToggle;
|