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

const fallback = {
  src: 'https://satyr.io/50',
  alt: '50x50 image'
}

const items = [
  {
    alt: '500x500 image, 3 seconds delay',
    src: 'https://satyr.io/200?delay=3g',
    href: 'https://item0'
  }, {
    alt: 'random 200x200 image',
    src: 'https://satyr.io/200'
  }, {
    alt: 'Will not load',
    src: 'https://'
  }, {
    alt: 'Will not load',
    src: 'http://',
    href: 'https://item3'
  }
]

return (
  <ThumbnailList items={items} captionText='Lorem' placeholder={placeholder} fallback={fallback} rounded/>
)
