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 | 7x 7x 7x 7x 7x 12x 7x 35x 35x 35x | import classNames from "classnames";
import Map from "components/Map";
import { LngLat } from "maplibre-gl";
import { Page } from "proto/pages_pb";
import React from "react";
import makeStyles from "utils/makeStyles";
const useStyles = makeStyles((theme) => ({
root: {
backgroundSize: "cover",
backgroundPosition: "center",
height: "8rem",
width: "100%",
marginBottom: theme.spacing(1),
[theme.breakpoints.down("md")]: {
//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;
}) {
const classes = useStyles();
if (page.photoUrl) {
return (
<div
className={classNames(classes.root, 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 (
<div className={classNames(classes.root, className)}>
<Map grow interactive={false} initialCenter={lngLat} initialZoom={zoom} />
</div>
);
}
|