import React from 'react'

import { EmptyState, Flex } from 'playbook-ui'

const EmptyStateDefault = (props) => (
  <Flex align="center"
      orientation="column"
  >
    <EmptyState
        description="Body text goes into detail with possible steps for user to take"
        header="Title Explains"
        image="default"
    />
  </Flex>
)

export default EmptyStateDefault

import React from 'react'

import { EmptyState, Flex } from 'playbook-ui'

const EmptyStateSize = (props) => (
  <Flex align="center"
      spacing="evenly"
  >
      <EmptyState
          alignment="center"
          description="Body text goes into detail with possible steps for user to take"
          header="Title Explains"
          image="default"
          linkButton="Alt Action"
          onLinkButtonClick={() => alert("link button clicked!")}
          onPrimaryButtonClick={() => alert("primary button clicked!")}
          primaryButton="Next Action"
          size="sm"
      />
      <EmptyState
          alignment="center"
          description="Body text goes into detail with possible steps for user to take"
          header="Title Explains"
          image="default"
          linkButton="Alt Action"
          onLinkButtonClick={() => alert("link button clicked!")}
          onPrimaryButtonClick={() => alert("primary button clicked!")}
          primaryButton="Next Action"
          size="lg"
      />
  </Flex>
)

export default EmptyStateSize

import React from 'react'

import { EmptyState, Flex } from 'playbook-ui'

const EmptyStateOrientation = (props) => (
  <Flex align="center"
      orientation="column"
  >
    <EmptyState
        alignment="left"
        description="Body text goes into detail with possible steps for user to take"
        header="Title Explains"
        image="default"
        orientation="horizontal"
        primaryButton="Next Action"
        size="lg"
    />
  </Flex>
)

export default EmptyStateOrientation

import React from 'react'

import { EmptyState, Flex } from 'playbook-ui'

const EmptyStateAlignment = (props) => (
  <Flex align="center"
      spacing="evenly"
  >
      <EmptyState
          alignment="left"
          description="Body text goes into detail with possible steps for user to take"
          header="Title Explains"
          image="default"
          primaryButton="Next Action"
          size="md"
      />
      <EmptyState
          alignment="center"
          description="Body text goes into detail with possible steps for user to take"
          header="Title Explains"
          image="default"
          primaryButton="Next Action"
          size="md"
      />
      <EmptyState
          alignment="right"
          description="Body text goes into detail with possible steps for user to take"
          header="Title Explains"
          image="default"
          primaryButton="Next Action"
          size="md"
      />
  </Flex>
)

export default EmptyStateAlignment