Galería de Imágenes

Lo que vas a construir

Una galeria de imagenes responsive con React. Usa grid layout que se adapta al tamano de pantalla, lazy loading para mejor rendimiento, y un lightbox modal al hacer click en las imagenes. Un componente reutilizable perfecto para portfolios o catalogos de productos.

Paso 1: Pídele a una IA la galería

Necesito una galería de imágenes en React con:
- Grid responsive (1, 2 o 3 columnas según pantalla)
- Lazy loading de imágenes
- Click para abrir lightbox/modal
- Navegación anterior/siguiente en modal
- Cerrar con X o click fuera
- Animaciones suaves
- TypeScript y Tailwind CSS

Usa imágenes de placeholder de Unsplash.

Grid responsive

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
  {images.map((image, index) => (
    <div
      key={image.id}
      className="aspect-square overflow-hidden rounded-lg cursor-pointer"
      onClick={() => openLightbox(index)}
    >
      <img
        src={image.src}
        alt={image.alt}
        loading="lazy"
        className="w-full h-full object-cover hover:scale-105 transition"
      />
    </div>
  ))}
</div>

Lightbox

const [lightboxIndex, setLightboxIndex] = useState<number | null>(null)

const openLightbox = (index: number) => setLightboxIndex(index)
const closeLightbox = () => setLightboxIndex(null)

const next = () => {
  if (lightboxIndex !== null) {
    setLightboxIndex((lightboxIndex + 1) % images.length)
  }
}

const prev = () => {
  if (lightboxIndex !== null) {
    setLightboxIndex((lightboxIndex - 1 + images.length) % images.length)
  }
}

Imágenes de prueba

const images = [
  { id: 1, src: 'https://picsum.photos/800/600?random=1', alt: 'Image 1' },
  { id: 2, src: 'https://picsum.photos/800/600?random=2', alt: 'Image 2' },
  // más...
]

Próximo paso

→ API con FastAPI