06.layout-component.jsx

/**
 * Layout component
 * We can extend the idea of Base components to create Layout components
 *
 * @Reference:
 * http://jxnblk.com/writing/posts/patterns-for-style-composition-in-react/
 * https://github.com/vasanthk/react-bits/blob/master/styling/05.base-component.jsx
 */

// Example
const Grid = (props) => (
  <Box {...props}
    display='inline-block'
    verticalAlign='top'
    px={2}/>
);

const Half = (props) => (
  <Grid {...props}
    width={1 / 2}/>
);

const Third = (props) => (
  <Grid {...props}
    width={1 / 3}/>
);

const Quarter = (props) => (
  <Grid {...props}
    width={1 / 4}/>
);

const Flex = (props) => (
  <Box {...props}
    display='flex'/>
);

const FlexAuto = (props) => (
  <Box {...props}
    flex='1 1 auto'/>
);

// Usage example
const Layout = () => (
  <div>
    <div>
      <Half>Half width column</Half>
      <Half>Half width column</Half>
    </div>
    <div>
      <Third>Third width column</Third>
      <Third>Third width column</Third>
      <Third>Third width column</Third>
    </div>
    <div>
      <Quarter>Quarter width column</Quarter>
      <Quarter>Quarter width column</Quarter>
      <Quarter>Quarter width column</Quarter>
      <Quarter>Quarter width column</Quarter>
    </div>
  </div>
);