packages/website/ts/@next/components/newLayout.tsx


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

import * as React from 'react';
import styled from 'styled-components';

interface Props {
    isPadded: boolean;
    bgColor?: 'dark' | 'light' | string;
}

export const Section = (props: Props) => (
    <SectionBase bgColor={props.bgColor}>
        <Wrap
            isPadded={props.isPadded}
        >
            {props.children}
        </Wrap>
    </SectionBase>
);

Section.defaultProps = {
    isPadded: true,
};

const SectionBase = styled.section`
    width: calc(100% - 60px);
    margin: 0 auto;
    padding: 120px 0;
    background-color: ${props => props.theme[`${props.bgColor}BgColor`] || props.bgColor};

    @media (max-width: 768px) {
        padding: 40px 0;
    }
`;

const Wrap = styled.div`
    width: calc(100% - 60px);
    max-width: 895px;
    margin: 0 auto;
    text-align: center;
`;