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

wix-style-react

import React from 'react';

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

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

var pageContainerStyles = {
  height: 500,
  display: 'flex',
  flexFlow: 'column',
  minHeight: 0,
  maxWidth: '90%'
};

var ExampleEmptyState = function ExampleEmptyState() {
  return React.createElement(
    'div',
    { 'data-hook': 'story-page-empty-state', style: pageContainerStyles },
    React.createElement(
      Page,
      null,
      React.createElement(Page.Header, {
        title: 'Your Product',
        actionsBar: React.createElement(
          Button,
          { withNewIcons: true, prefixIcon: React.createElement(Add, null) },
          'New Item'
        )
      }),
      React.createElement(
        Page.Content,
        null,
        React.createElement(
          EmptyState,
          {
            theme: 'page',
            title: 'You don\'t have any items yet',
            subtitle: 'Create your product item in an easy & fast way to display it on your website',
            image: React.createElement(ImagePlaceholder, null)
          },
          React.createElement(
            TextLink,
            { prefixIcon: React.createElement(Add, null) },
            'New Item'
          )
        )
      )
    )
  );
};

export default ExampleEmptyState;