import React from 'react';
import styled from 'styled-components';

const FormEmptyState = () => {
  return /*#__PURE__*/ React.createElement(
    EmptyContainer,
    {
      className: 'empty-container',
    },
    /*#__PURE__*/ React.createElement('img', {
      src: '/images/empty.png',
      alt: 'empty illlustration',
    }),
    /*#__PURE__*/ React.createElement(
      'p',
      null,
      'Click or Drag Fields From the Left Panel and Drop it Here'
    )
  );
};

export default FormEmptyState;
const EmptyContainer = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  img {
    width: 82px;
    height: 82px;
  }
  p {
    font-family: var(--ff-medium);
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    max-width: 280px;
    text-align: center;
    margin-top: 2rem;
  }
`;
