Aarni Halinen
50 lines
1.3 KiB
TypeScript
50 lines
1.3 KiB
TypeScript
import React from "react";
|
|
import styled from "styled-components";
|
|
import { ColorDivProps } from "../ColorDiv/ColorDiv";
|
|
import { ColorMapper } from "@theme/colors";
|
|
|
|
interface PageSectionProps {
|
|
center?: boolean;
|
|
cardSection?: boolean; // does section contain a grid of cards
|
|
fullSize?: boolean;
|
|
}
|
|
|
|
const Section = styled.section<PageSectionProps>`
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
justify-content: ${(p) => p.center ? "center" : "space-between"};
|
|
position: relative;
|
|
padding: ${(p) => p.fullSize ? 0 : "2rem 1rem 2rem"};
|
|
|
|
color: ${(p) => p.textColor};
|
|
background-color: ${(p) => p.backgroundColor};
|
|
&:hover {
|
|
color: ${(p) => p.hoverColor};
|
|
background-color: ${(p) => p.hoverBackgroundColor};
|
|
}
|
|
|
|
.lander-hero {
|
|
@media screen and (min-width: 800px) {
|
|
min-height: 85vh;
|
|
}
|
|
}
|
|
|
|
${(p) => p.cardSection ? "" : `
|
|
@media screen and (max-width: 800px - 1px) {
|
|
flex-flow: column nowrap;
|
|
}
|
|
`}
|
|
`;
|
|
|
|
const PageSection: React.FC<PageSectionProps & ColorDivProps> = ({ textColor, backgroundColor, hoverColor, backgroundHoverColor, ...props }) => (
|
|
<Section
|
|
textColor={ColorMapper.get(textColor)}
|
|
backgroundColor={ColorMapper.get(backgroundColor)}
|
|
hoverColor={ColorMapper.get(hoverColor)}
|
|
hoverBackgroundColor={ColorMapper.get(backgroundHoverColor)}
|
|
{...props}
|
|
/>
|
|
);
|
|
|
|
export default PageSection;
|