Image Gallery

This example shows a simple image gallery with a click-to-enlarge feature.

jsxCopy codeimport React, { useState } from 'react';
import ReactDOM from 'react-dom';

const images = [
  'https://via.placeholder.com/150',
  'https://via.placeholder.com/200',
  'https://via.placeholder.com/250',
];

function ImageGallery() {
  const [selectedImage, setSelectedImage] = useState(null);

  return (
    <div>
      <h1>Image Gallery</h1>
      <div style={{ display: 'flex', gap: '10px' }}>
        {images.map((image, index) => (
          <img
            key={index}
            src={image}
            alt={`Gallery ${index}`}
            style={{ cursor: 'pointer' }}
            onClick={() => setSelectedImage(image)}
          />
        ))}
      </div>
      {selectedImage && (
        <div onClick={() => setSelectedImage(null)} style={{ cursor: 'pointer', marginTop: '20px' }}>
          <img src={selectedImage} alt="Selected" style={{ width: '300px', height: 'auto' }} />
        </div>
      )}
    </div>
  );
}

ReactDOM.render(<ImageGallery />, document.getElementById('root'));