kitten.sh
1import React from 'react';
2import styled, { css } from 'styled-components';
3import constants from '../constants';
4
5const dark = css`
6 background-color: #0d1129;
7`;
8
9const light = css`
10 background: ${constants.color};
11 border-bottom: 1rem solid rgba(0, 0, 0, 0.4);
12 box-shadow: inset 0 -1rem 0 rgba(0, 0, 0, 0.2);
13`;
14export const FullWidthContainer = styled.div`
15 color: #e3eef8;
16 display: flex;
17 justify-content: center;
18 ${p => (p.isLight ? light : dark)};
19 ${p => p.background && `background: ${p.background}`}
20`;
21
22export const SectionWrapper = styled.div`
23 flex-direction: column;
24 align-items: center;
25 display: flex;
26 padding: 8rem 4rem;
27 width: 100%;
28 @media (min-width: 768px) {
29 flex-direction: column;
30 margin: 0 8rem;
31 padding: 8rem 8rem;
32 }
33`;
34
35export const PanelSectionWrapper = ({
36 children,
37 isLight,
38 background,
39 ...rest
40}) => (
41 <FullWidthContainer isLight={!!isLight} background={background} {...rest}>
42 <SectionWrapper>{children}</SectionWrapper>
43 </FullWidthContainer>
44);