62 lines
1.4 KiB
JavaScript
62 lines
1.4 KiB
JavaScript
import React from 'react';
|
|
import styled from 'styled-components';
|
|
import { Card, H2, P } from '../';
|
|
import remcalc from 'remcalc';
|
|
|
|
const CardStyled = styled(Card)`
|
|
margin-bottom: ${remcalc(36)};
|
|
`;
|
|
|
|
const Header = styled.header`
|
|
background: ${props => props.theme.primary};
|
|
padding: ${remcalc(50)} ${remcalc(120)};
|
|
position: relative;
|
|
`;
|
|
|
|
const Main = styled.div`
|
|
padding: ${remcalc(50)} ${remcalc(120)};
|
|
|
|
h4 {
|
|
margin: 0;
|
|
line-height: ${remcalc(26)};
|
|
font-size: ${remcalc(21)};
|
|
|
|
& + p {
|
|
margin-top: ${remcalc(24)};
|
|
}
|
|
}
|
|
`;
|
|
|
|
const HeaderText = styled(H2)`
|
|
-webkit-text-fill-color: ${props => props.theme.white};
|
|
color: ${props => props.theme.white};
|
|
`;
|
|
|
|
const Desc = styled(P)`
|
|
-webkit-text-fill-color: ${props => props.theme.white};
|
|
color: ${props => props.theme.white};
|
|
`;
|
|
|
|
export default allProps => {
|
|
const { name, content, components, sections, depth, description } = allProps;
|
|
|
|
const Tag = depth === 2 ? CardStyled : 'div';
|
|
const TagMain = depth === 2 ? Main : 'div';
|
|
return (
|
|
<Tag id={name.replace(/\s+/g, '-').toLowerCase()}>
|
|
{name &&
|
|
depth !== 1 && (
|
|
<Header>
|
|
<HeaderText>{name}</HeaderText>
|
|
{description && <Desc>{description}</Desc>}
|
|
</Header>
|
|
)}
|
|
<TagMain>
|
|
{content}
|
|
{components}
|
|
{sections}
|
|
</TagMain>
|
|
</Tag>
|
|
);
|
|
};
|