66 lines
1.4 KiB
JavaScript
66 lines
1.4 KiB
JavaScript
import React from "react";
|
|
import Img from "gatsby-image";
|
|
import styled from "@emotion/styled";
|
|
import { css } from "@emotion/react";
|
|
const Container = styled.header`
|
|
position: relative;
|
|
height: 50vh;
|
|
min-height: 280px;
|
|
color: var(--color-white);
|
|
${props => props.avoidNav && `margin-top: 40px;`}
|
|
`;
|
|
|
|
const Content = styled.div`
|
|
position: absolute;
|
|
${props =>
|
|
props.posY !== "bottom" &&
|
|
css`
|
|
top: ${props.posY === "top" ? 0 : "50%"};
|
|
`}
|
|
${props =>
|
|
props.posY === "bottom" &&
|
|
css`
|
|
bottom: 0;
|
|
`}
|
|
${props =>
|
|
props.posX !== "right" &&
|
|
css`
|
|
left: ${props.posX === "left" ? 0 : "50%"};
|
|
`}
|
|
${props =>
|
|
props.posX === "right" &&
|
|
css`
|
|
right: 0;
|
|
`}
|
|
transform: translate(
|
|
${props => (props.posX === "middle" ? "-50%" : 0)},
|
|
${props => (props.posY === "middle" ? "-50%" : 0)}
|
|
);
|
|
max-width: var(--page-max-width);
|
|
padding: var(--spacing-y-sm) var(--spacing-x-sm);
|
|
text-align: center;
|
|
`;
|
|
|
|
const Map = styled.div``;
|
|
|
|
export default function Header({
|
|
image,
|
|
map,
|
|
position = "middle middle",
|
|
avoidNav,
|
|
variant,
|
|
swap,
|
|
children
|
|
}) {
|
|
const [posY, posX] = position.split(" ");
|
|
return (
|
|
<Container avoidNav={avoidNav}>
|
|
{image && <Img style={{ height: "100%" }} fluid={image} />}
|
|
{map && <Map>{map}</Map>}
|
|
<Content posX={posX} posY={posY}>
|
|
{children}
|
|
</Content>
|
|
</Container>
|
|
);
|
|
}
|