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

wix-style-react

import React from 'react';

import Card from 'wix-style-react/Card';
import { Add } from 'wix-style-react/new-icons';
import TextLink from 'wix-style-react/TextLink';
import Button from 'wix-style-react/Button';
import EmptyState from 'wix-style-react/EmptyState';

import ImagePlaceholder from '../assets/ImagePlaceholder';

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