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 | 6x 6x 6x 6x 12x 12x 12x | import { styled } from "@mui/material";
import Map from "components/Map";
import { LngLat } from "maplibre-gl";
import { Page } from "proto/pages_pb";
import React from "react";
const StyledWrapper = styled("div")(({ theme }) => ({
backgroundSize: "cover",
backgroundPosition: "center",
height: "8rem",
width: "100%",
marginBottom: theme.spacing(1),
[theme.breakpoints.down("lg")]: {
//break out of page margins
left: "50%",
marginLeft: "-50vw",
marginRight: "-50vw",
position: "relative",
right: "50%",
width: "100vw",
},
[theme.breakpoints.up("md")]: {
height: "16rem",
marginTop: theme.spacing(-2),
},
}));
export default function PageHeader({
page,
className,
}: {
page: Page.AsObject;
className?: string;
}) {
if (page.photoUrl) {
return (
<StyledWrapper
className={className}
style={{ backgroundImage: `url(${page.photoUrl})` }}
/>
);
}
//display a map if there's no image
//if no location, just display a zoomed out map of the world
const zoom = page.location ? 13 : 1;
const lngLat = new LngLat(page.location?.lng ?? 0, page.location?.lat ?? 0);
return (
<StyledWrapper className={className}>
<Map grow interactive={false} initialCenter={lngLat} initialZoom={zoom} />
</StyledWrapper>
);
}
|