const placeholder= {
  src: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2aWV3Qm94PSIwIDAgNTAwIDUwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjUwMCIgaGVpZ2h0PSI1MDAiIGZpbGw9IiM3NzciLz4KPC9zdmc+',
  alt: 'placeholder'
}

const fallback= {
  src: 'https://satyr.io/500',
  alt: 'fallback'
}

return (
  <div style={{margin: '8px 8px'}}>
    <h2>Placeholder</h2>
    <div style={{width: '20%'}}>
      <ImagePlaceholder
        src='https://satyr.io/1000?delay=3g'
        alt='Some alt'
        placeholder={placeholder}
        onLoad={() => console.log('custom onLoad')}
      />
    </div>
    <h2>Fallback example</h2>
    <div style={{width: '20%'}}>
      <ImagePlaceholder
        src='http://404'
        alt='Some alt'
        placeholder={placeholder}
        fallback={fallback}
      />
    </div>
    <h2>Error without Fallback example</h2>
    <div style={{width: '20%'}}>
      <ImagePlaceholder
        src='http://404'
        alt='Some alt'
        placeholder={placeholder}
        onError={() => console.log('custom onError')}
      />
    </div>
    <h2>Failing Fallback example</h2>
    <div style={{width: '20%'}}>
      <ImagePlaceholder
        src='http://404'
        alt='Some alt'
        placeholder={placeholder}
        fallback={{
          src: 'http://404',
          alt: ''
        }}
      />
    </div>
    <h2>Rounded corner</h2>
    <div style={{width: '20%'}}>
      <ImagePlaceholder
        src='https://satyr.io/1000?delay=3g'
        alt='Some alt'
        placeholder={placeholder}
        onLoad={() => console.log('custom onLoad')}
        rounded />
    </div>
  </div>
)
