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'));