@lyra/components/lib/previews/common/SvgPlaceholder.js

Basic UX components

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const svgStyles = {
  position: 'relative',
  width: '100%',
  height: '100%'
};

const SvgPlaceholder = ({ styles }) => {
  return _react2.default.createElement(
    'div',
    { className: styles.placeholder },
    _react2.default.createElement(
      'svg',
      { x: '0', y: '0', className: styles.svg, style: svgStyles },
      _react2.default.createElement(
        'linearGradient',
        {
          id: 'loader_gradient',
          gradientUnits: 'userSpaceOnUse',
          x1: '0%',
          y1: '0%',
          x2: '100%',
          y2: '100%'
        },
        _react2.default.createElement('stop', {
          offset: '0',
          style: { stopColor: 'currentColor' },
          stopOpacity: '0.2'
        }),
        _react2.default.createElement('stop', {
          offset: '0.5',
          style: { stopColor: 'currentColor' },
          stopOpacity: '0.3'
        }),
        _react2.default.createElement('stop', {
          offset: '1',
          style: { stopColor: 'currentColor' },
          stopOpacity: '0.2'
        })
      ),
      _react2.default.createElement(
        'g',
        { fill: 'url(#loader_gradient)', className: styles.placeholderG },
        _react2.default.createElement('rect', { className: styles.media }),
        _react2.default.createElement('rect', { className: styles.date, width: '80%' }),
        _react2.default.createElement('rect', { className: styles.title, width: '80%' }),
        _react2.default.createElement('rect', { className: styles.subtitle, width: '50%' }),
        _react2.default.createElement('rect', { className: styles.description_1, width: '100%' }),
        _react2.default.createElement('rect', { className: styles.description_2, width: '50%' })
      )
    )
  );
};

SvgPlaceholder.propTypes = {
  styles: _propTypes2.default.object
};

SvgPlaceholder.defaultProps = {
  styles: {}
};

exports.default = SvgPlaceholder;