44 lines
945 B
JavaScript
44 lines
945 B
JavaScript
import React from "react";
|
|
import styled from "@emotion/styled";
|
|
import { Heading } from ".";
|
|
|
|
const Container = styled.div`
|
|
padding: var(--spacing-y-lg) var(--spacing-x-sm);
|
|
${props => !props.variant && `background-color: var(--color-white);`}
|
|
${props =>
|
|
props.variant === "primary" &&
|
|
`background-color: var(--theme-color-light);`}
|
|
${props =>
|
|
props.variant === "transparent" &&
|
|
`background-color: var(--color-semi-transparent);`}
|
|
`;
|
|
|
|
const Content = styled.div`
|
|
max-width: var(--theme-max-width);
|
|
margin: 0 auto;
|
|
`;
|
|
|
|
const Head = styled.div`
|
|
text-align: center;
|
|
`;
|
|
|
|
export default function Section({
|
|
heading,
|
|
headingElement = "h2",
|
|
children,
|
|
variant
|
|
}) {
|
|
return (
|
|
<Container variant={variant}>
|
|
<Content>
|
|
{heading && (
|
|
<Head>
|
|
<Heading el={headingElement}>{heading}</Heading>
|
|
</Head>
|
|
)}
|
|
{children}
|
|
</Content>
|
|
</Container>
|
|
);
|
|
}
|