Crossfade

import { useState } from 'react';

const photos = [
  { src: '/photos/lake.jpg', alt: 'Morning fog over a mountain lake' },
  { src: '/photos/dunes.jpg', alt: 'Sand dunes at sunset' },
  { src: '/photos/forest.jpg', alt: 'Sunlight through a pine forest' }
];

export function PhotoViewer() {
  const [active, setActive] = useState(0);

  return (
    <div className='w-96'>
      {/* Every photo sits in the same grid cell, so the old and new one overlap while they fade. */}
      <div className='grid aspect-4/3 overflow-hidden rounded-2xl bg-muted'>
        {photos.map((photo, index) => (
          <img
            key={photo.src}
            src={photo.src}
            alt={photo.alt}
            aria-hidden={index !== active}
            className={`col-start-1 row-start-1 size-full object-cover transition-opacity duration-300 ease-in-out ${index === active ? 'opacity-100' : 'opacity-0'}`}
          />
        ))}
      </div>
      <div className='mt-3 flex gap-2'>
        {photos.map((photo, index) => (
          <button
            key={photo.src}
            type='button'
            aria-label={photo.alt}
            aria-pressed={index === active}
            onClick={() => setActive(index)}
            className='overflow-hidden rounded-lg opacity-60 transition-opacity aria-pressed:opacity-100 aria-pressed:ring-2 aria-pressed:ring-ring'
          >
            <img src={photo.src} alt='' className='size-14 object-cover' />
          </button>
        ))}
      </div>
    </div>
  );
}