Build a Lazy-loaded Image

import React from 'react';
import LazyImage from './src/LazyImage';

// Tiny inline SVG data URIs so the demo needs no network.
const img = (hue) =>
  `data:image/svg+xml;utf8,` +
  encodeURIComponent(
    `<svg xmlns='http://www.w3.org/2000/svg' width='300' height='160'><rect width='100%' height='100%' fill='hsl(${hue},70%,55%)'/><text x='50%' y='50%' fill='white' font-size='20' text-anchor='middle' dominant-baseline='middle'>Image ${hue}</text></svg>`
  );

export default function App() {
  return (
    <div style={{ fontFamily: 'sans-serif', padding: 20 }}>
      <h1>Lazy Image Demo</h1>
      <p style={{ color: '#666' }}>Scroll down — each image loads as it nears the viewport.</p>
      {[10, 90, 170, 250, 330].map((h) => (
        <div key={h} style={{ marginBottom: 40 }}>
          <LazyImage src={img(h)} width={300} height={160} alt={`Image ${h}`} />
        </div>
      ))}
    </div>
  );
}