const FixedNode = (
  <div style={{ width: '100%', height: '100px', backgroundColor: 'lightblue', border: '2px solid blue', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
    <span style={{ color: 'blue' }}>This is a FIXED to BOTTOM element, with FULL-WIDTH size.</span>
  </div>
)

const StickyNode = (
  <div style={{ backgroundColor: 'lightpink', border: '2px solid red', width: '200px' }}>
    <span style={{ color: 'red' }}>This is a STICKY element, fixed to TOP.</span>
  </div>
)

const emptyLines = (n) => (
  <div>
    {[...Array(n)].map((_, i) => (
      <span key={'span_' + i}>...<br /></span>
    ))}
  </div>
)

return (
  <div style={{ height: '2000px', width: '100%', backgroundColor: 'white'}}>
    <div style={{ maxWidth: 600 }}>
      <strong>Keep in mind that your page container must be scrollable.</strong>
       <br />
       <strong>For example, as sui-studio is not
      (overflow: scroll and fixed height: 100vh is set), you may add the following lines in console in order
      to make it work:</strong>
      <br />
      <br />
      <code>document.body.style.overflow = 'scroll'</code>
      <br />
      <code>document.querySelector('section.sui-Studio').style.height = 'auto'</code>
      <br />
    </div>
    { emptyLines(10) }

    <StickyContent
      sticky
      scrollableElementSelector='body'
      position='top'>
      { StickyNode }
    </StickyContent>

    <StickyContent
      fixed
      fullWidth
      position='bottom'>
      { FixedNode }
    </StickyContent>
  </div>
)
