wix-style-react/dist/es/stories/AddItem/Examples/VerticalExample.js

wix-style-react

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

import { Col, Row } from 'wix-style-react/Grid';
import Heading from 'wix-style-react/Heading';
import Text from 'wix-style-react/Text';
import AddItem from 'wix-style-react/AddItem';
import Card from 'wix-style-react/Card';

export default (function () {
  return React.createElement(
    Row,
    { stretchViewsVertically: true },
    React.createElement(
      Col,
      { span: 6 },
      React.createElement(
        Card,
        null,
        React.createElement(
          Card.Content,
          null,
          React.createElement(
            CenterElements,
            null,
            React.createElement('div', {
              style: {
                height: 120,
                width: 120,
                backgroundColor: '#dfe5eb',
                borderRadius: '50%'
              }
            })
          ),
          React.createElement(
            CenterElements,
            null,
            React.createElement(
              Heading,
              { appearance: 'H4' },
              'Clark Broke'
            ),
            React.createElement(
              Text,
              null,
              'jen@yoga.train'
            )
          )
        )
      )
    ),
    React.createElement(
      Col,
      { span: 6 },
      React.createElement(
        AddItem,
        { size: 'medium' },
        'Add New Staff Member'
      )
    )
  );
});

var CenterElements = function CenterElements(_ref) {
  var children = _ref.children;
  return React.createElement(
    'div',
    {
      style: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        padding: '15px'
      }
    },
    children
  );
};

CenterElements.propTypes = {
  children: PropTypes.node
};