CodeBlock.js

// Compound component.
//
// https://codepen.io/zaydek/pen/PowjgOg
const CodeBlock = props => (
	<div style={stylex.parse("p-y:16 b:gray-100 br:8 overflow -x:scroll")}>
		{props.children.map((each, index) => (
			<code key={each.key} style={{ ...stylex.parse("p-x:16 inline-block"), minWidth: "100%", ...codeLineStyle }}>
				<Syntax
					start={!index && props.open}
					end={index + 1 === props.children.length && "```"}
				>
					{each.data || (
						index > 0 && index + 1 < props.children.length && (
							<br />
						)
					)}
				</Syntax>
			</code>
		))}
	</div>
)