CollectionView

import {
  Collection,
  CollectionRow,
  CollectionView,
  Pagination,
  Search,
} from '@vtex/shoreline'
import { DecorativeBox } from '../components/decorative-box'

export default function Example() {
  return (
    <Collection>
      <CollectionRow>
        <Search />
        <Pagination page={1} total={74} />
      </CollectionRow>
      <CollectionView status="ready">
        <DecorativeBox subtle height="25rem" />
      </CollectionView>
      <CollectionRow align="flex-end">
        <Pagination page={1} total={74} />
      </CollectionRow>
    </Collection>
  )
}

import { Collection, CollectionView } from '@vtex/shoreline'
import { DecorativeBox } from '../components/decorative-box'

export default function Example() {
  return (
    <Collection>
      <CollectionView status="error">
        <DecorativeBox subtle height="25rem" />
      </CollectionView>
    </Collection>
  )
}

import { Collection, CollectionView } from '@vtex/shoreline'
import { DecorativeBox } from '../components/decorative-box'

export default function Example() {
  return (
    <Collection>
      <CollectionView
        status="error"
        messages={{
          'error-heading': 'Error fetching products',
          'error-action': 'Retry',
        }}
        onError={() => alert('On error action')}
      >
        <DecorativeBox subtle height="25rem" />
      </CollectionView>
    </Collection>
  )
}

import { Collection, CollectionView } from '@vtex/shoreline'
import { DecorativeBox } from '../components/decorative-box'

export default function Example() {
  return (
    <Collection>
      <CollectionView status="error" onError={() => alert('On empty action')}>
        <DecorativeBox subtle height="25rem" />
      </CollectionView>
    </Collection>
  )
}

import { Collection, CollectionView } from '@vtex/shoreline'
import { DecorativeBox } from '../components/decorative-box'

export default function Example() {
  return (
    <Collection>
      <CollectionView status="empty">
        <DecorativeBox subtle height="25rem" />
      </CollectionView>
    </Collection>
  )
}

import { Collection, CollectionView } from '@vtex/shoreline'
import { DecorativeBox } from '../components/decorative-box'

export default function Example() {
  return (
    <Collection>
      <CollectionView
        status="empty"
        messages={{
          'empty-heading': 'No products created inside this category yet.',
          'empty-description': 'Use the button below to create a new product',
          'empty-action': 'Create product',
        }}
        onEmpty={() => alert('On empty action')}
      >
        <DecorativeBox subtle height="25rem" />
      </CollectionView>
    </Collection>
  )
}

import { Collection, CollectionView } from '@vtex/shoreline'
import { DecorativeBox } from '../components/decorative-box'

export default function Example() {
  return (
    <Collection>
      <CollectionView status="empty" onEmpty={() => alert('On empty action')}>
        <DecorativeBox subtle height="25rem" />
      </CollectionView>
    </Collection>
  )
}

import { Collection, CollectionView } from '@vtex/shoreline'
import { DecorativeBox } from '../components/decorative-box'

export default function Example() {
  return (
    <Collection>
      <CollectionView status="not-found">
        <DecorativeBox subtle height="25rem" />
      </CollectionView>
    </Collection>
  )
}

import { Collection, CollectionView } from '@vtex/shoreline'
import { DecorativeBox } from '../components/decorative-box'

export default function Example() {
  return (
    <Collection>
      <CollectionView
        status="not-found"
        messages={{
          'not-found-heading': 'No products found',
          'not-found-description': 'No products match your search criteria',
        }}
      >
        <DecorativeBox subtle height="25rem" />
      </CollectionView>
    </Collection>
  )
}

import { Collection, CollectionView } from '@vtex/shoreline'
import { DecorativeBox } from '../components/decorative-box'

export default function Example() {
  return (
    <Collection>
      <CollectionView status="unauthorized">
        <DecorativeBox subtle height="25rem" />
      </CollectionView>
    </Collection>
  )
}

import { Collection, CollectionView } from '@vtex/shoreline'
import { DecorativeBox } from '../components/decorative-box'

export default function Example() {
  return (
    <Collection>
      <CollectionView
        status="unauthorized"
        messages={{
          'unauthorized-heading': 'Unauthorized Access',
          'unauthorized-description':
            'You do not have permission to view this content',
        }}
      >
        <DecorativeBox subtle height="25rem" />
      </CollectionView>
    </Collection>
  )
}