wix-style-react/dist/stories/Card/ExampleEmptyState.js

wix-style-react

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _Card = require('wix-style-react/Card');

var _Card2 = _interopRequireDefault(_Card);

var _newIcons = require('wix-style-react/new-icons');

var _TextLink = require('wix-style-react/TextLink');

var _TextLink2 = _interopRequireDefault(_TextLink);

var _Button = require('wix-style-react/Button');

var _Button2 = _interopRequireDefault(_Button);

var _EmptyState = require('wix-style-react/EmptyState');

var _EmptyState2 = _interopRequireDefault(_EmptyState);

var _ImagePlaceholder = require('../assets/ImagePlaceholder');

var _ImagePlaceholder2 = _interopRequireDefault(_ImagePlaceholder);

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

exports.default = function () {
  return _react2.default.createElement(
    'div',
    {
      style: { background: '#F0F4F7', padding: 30, width: '50vw' },
      'data-hook': 'card-example-empty-state'
    },
    _react2.default.createElement(
      _Card2.default,
      null,
      _react2.default.createElement(_Card2.default.Header, {
        title: 'Card title',
        suffix: _react2.default.createElement(_Button2.default, {
          onClick: function onClick() {
            return alert('Clicked!');
          },
          height: 'small',
          theme: 'fullblue',
          prefixIcon: _react2.default.createElement(_newIcons.Add, null),
          children: 'New Image'
        })
      }),
      _react2.default.createElement(
        _Card2.default.Content,
        null,
        _react2.default.createElement(_EmptyState2.default, {
          title: 'You don\'t have any images yet',
          subtitle: 'Start by adding new images to your album',
          image: _react2.default.createElement(_ImagePlaceholder2.default, null),
          children: _react2.default.createElement(
            _TextLink2.default,
            { prefixIcon: _react2.default.createElement(_newIcons.Add, null) },
            'Add image'
          )
        })
      )
    )
  );
};