message: DRY up Library component with Content block
diff: @@ -26,27 +26,13 @@ const Library = withRouter(props => {
  <Route
  exact
  path={basename}
  - render={() => (
  - <React.Fragment>
  - <Heading is="h1" mb={3}>
  - {title}
  - </Heading>
  - {children}
  - </React.Fragment>
  - )}
  + render={() => <Content title={title}>{children}</Content>}
  />
  {examples.map(({name, element, path}) => (
  <Route
  key={name}
  path={path}
  - render={() => (
  - <React.Fragment>
  - <Heading is="h1" mb={3}>
  - {name}
  - </Heading>
  - {element}
  - </React.Fragment>
  - )}
  + render={() => <Content title={name} children={element} />}
  />
  ))}
  </Box>
  @@ -54,6 +40,17 @@ const Library = withRouter(props => {
  )
  })
  +function Content({title, children, ...rest}) {
  + return (
  + <Box id="content" {...rest}>
  + <Heading is="h1" mb={3}>
  + {title}
  + </Heading>
  + {children}
  + </Box>
  + )
  +}
  +
  const ExampleShape = PropTypes.shape({
  element: PropTypes.node.isRequired,
  name: PropTypes.string.isRequired,
  