packages/dev-tools-pages/ts/components/Main.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
40
41

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

import { media } from 'ts/variables';
import { withContext, Props } from './withContext';

import { Alpha } from './Typography';

const StyledMain = styled.div`
    padding-top: 6.25rem;
    padding-bottom: 6.25rem;
    ${media.small`
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    `};
`;

const Title = styled(Alpha)`
    color: ${props => props.color};
    margin-bottom: 6.25rem;
    ${media.small`
        margin-bottom: 3.125rem;
    `};
`;

interface MainProps extends Props {
    children: React.ReactNode;
}

function Main(props: MainProps) {
    return (
        <StyledMain>
            <Title as="h2" color={props.colors.main}>
                Get started
            </Title>
            {props.children}
        </StyledMain>
    );
}

export default withContext(Main);