Atomic layout - Nested composition

Header.jsx

import React from 'react'
import { Composition } from 'atomic-layout'
import SearchBar from './SearchBar'

const templateMobile = `
  'logo'
  'search'
`

const Header = () => (
  <Composition
    template={templateMobile}
    gutter={10}>
    {({ Logo, Search }) => (
      <React.Fragment>
        <Logo>
          <img src="logo.png" />
        </Logo>
        <Search>
          {/* Nested composition! */}
          <SearchBar />
        </Search>
      </React.Fragment>
    )}
  </Composition>
)

export default Header