wix-style-react/dist/es/stories/Layout/examples/MainAndSide.js

wix-style-react

import React from 'react';
import PropTypes from 'prop-types';

import { Layout, Cell } from 'wix-style-react/Layout';
import Card from 'wix-style-react/Card';

import styles from '../styles.scss';

export default (function () {
  return React.createElement(
    'div',
    { className: styles.exampleContainer },
    React.createElement(
      Layout,
      null,
      React.createElement(
        Cell,
        { span: 8 },
        React.createElement(Section, { title: 'Main Content', height: '450px' })
      ),
      React.createElement(
        Cell,
        { span: 4 },
        React.createElement(
          Layout,
          null,
          React.createElement(
            Cell,
            null,
            React.createElement(Section, { title: 'Sidebar card', height: '200px' })
          ),
          React.createElement(
            Cell,
            null,
            React.createElement(Section, { title: 'Sidebar card 2', height: '300px' })
          )
        )
      )
    )
  );
});

function Section(_ref) {
  var title = _ref.title,
      height = _ref.height;

  return React.createElement(
    Card,
    null,
    React.createElement(Card.Header, { title: title }),
    React.createElement(
      Card.Content,
      null,
      React.createElement('div', { style: { height: height } })
    )
  );
}

Section.propTypes = {
  title: PropTypes.string,
  height: PropTypes.string
};