42 lines
772 B
JavaScript
42 lines
772 B
JavaScript
import React from 'react';
|
|
import styled from '@emotion/styled';
|
|
import { Box } from 'reflexbox';
|
|
|
|
import { colors } from 'themes';
|
|
import CodeBlock from 'components/Mdx/CodeBlock';
|
|
import { H4, AttributionText } from 'components/Typo';
|
|
|
|
const Wrapper = styled(Box)`
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
|
|
h4 {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
pre {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
}
|
|
|
|
code {
|
|
border: 1px solid ${colors.lightGrey};
|
|
border-radius: 3px;
|
|
}
|
|
`;
|
|
|
|
export default ({
|
|
language = 'javascript',
|
|
code,
|
|
title = '',
|
|
subtitle = '',
|
|
}) => {
|
|
return (
|
|
<Wrapper>
|
|
{title && <H4>{title}</H4>}
|
|
<CodeBlock language={language}>{code}</CodeBlock>
|
|
{subtitle && <AttributionText>{subtitle}</AttributionText>}
|
|
</Wrapper>
|
|
);
|
|
};
|