50 lines
1014 B
JavaScript
50 lines
1014 B
JavaScript
/** @jsx jsx */
|
|
import { jsx } from '@emotion/core';
|
|
|
|
const maxWidth = 700;
|
|
|
|
export function ContentArea({ children, css }) {
|
|
return (
|
|
<div
|
|
css={{
|
|
border: '1px solid #dfe2e5',
|
|
borderRadius: 3,
|
|
[`@media (max-width: ${maxWidth}px)`]: {
|
|
borderRightWidth: 0,
|
|
borderLeftWidth: 0
|
|
},
|
|
...css
|
|
}}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function ContentAreaHeaderBar({ children, css }) {
|
|
return (
|
|
<div
|
|
css={{
|
|
padding: 10,
|
|
background: '#f6f8fa',
|
|
color: '#424242',
|
|
border: '1px solid #d1d5da',
|
|
borderTopLeftRadius: 3,
|
|
borderTopRightRadius: 3,
|
|
margin: '-1px -1px 0',
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
[`@media (max-width: ${maxWidth}px)`]: {
|
|
paddingRight: 20,
|
|
paddingLeft: 20
|
|
},
|
|
...css
|
|
}}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|