You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
73 lines
1.6 KiB
73 lines
1.6 KiB
import React, {Component} from 'react';
|
|
import PropTypes from 'prop-types';
|
|
|
|
import {colors, media} from 'theme';
|
|
import CodeEditor from '../CodeEditor/CodeEditor';
|
|
|
|
class CodeExample extends Component {
|
|
render() {
|
|
const {children, code, id, loaded} = this.props;
|
|
return (
|
|
<div
|
|
id={id}
|
|
css={{
|
|
marginTop: 40,
|
|
|
|
'&:first-child': {
|
|
marginTop: 0,
|
|
},
|
|
|
|
'& .react-live': {
|
|
width: '100%',
|
|
},
|
|
|
|
[media.greaterThan('xlarge')]: {
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
marginTop: 80,
|
|
},
|
|
|
|
[media.lessThan('large')]: {
|
|
display: 'block',
|
|
},
|
|
}}>
|
|
{children && (
|
|
<div
|
|
css={{
|
|
flex: '0 0 33%',
|
|
[media.lessThan('xlarge')]: {
|
|
marginBottom: 20,
|
|
},
|
|
|
|
'& h3': {
|
|
color: colors.dark,
|
|
maxWidth: '11em',
|
|
paddingTop: 0,
|
|
},
|
|
|
|
'& p': {
|
|
marginTop: 15,
|
|
marginRight: 40,
|
|
lineHeight: 1.7,
|
|
|
|
[media.greaterThan('xlarge')]: {
|
|
marginTop: 25,
|
|
},
|
|
},
|
|
}}>
|
|
{children}
|
|
</div>
|
|
)}
|
|
{loaded ? <CodeEditor code={code} /> : <h4>Loading code example...</h4>}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
CodeExample.propTypes = {
|
|
children: PropTypes.node,
|
|
code: PropTypes.string.isRequired,
|
|
loaded: PropTypes.bool.isRequired,
|
|
};
|
|
|
|
export default CodeExample;
|
|
|