Magnifier lens

import { useState, type PointerEvent } from 'react';

type MagnifierProps = {
  src: string;
  /** A larger copy of the same photo, so the zoomed view stays sharp. */
  zoomSrc: string;
  alt: string;
  zoom?: number;
  lensSize?: number;
};

type Lens = { x: number; y: number; width: number; height: number };

export function Magnifier({
  src,
  zoomSrc,
  alt,
  zoom = 2.5,
  lensSize = 160
}: MagnifierProps) {
  const [lens, setLens] = useState<Lens | null>(null);
  const half = lensSize / 2;

  function onPointerMove(event: PointerEvent<HTMLDivElement>) {
    const rect = event.currentTarget.getBoundingClientRect();
    setLens({
      x: event.clientX - rect.left,
      y: event.clientY - rect.top,
      width: rect.width,
      height: rect.height
    });
  }

  return (
    <div
      onPointerMove={onPointerMove}
      onPointerLeave={() => setLens(null)}
      // touch-none lets a finger drag the lens instead of scrolling the page.
      className='relative aspect-[4/3] w-full max-w-lg touch-none overflow-hidden rounded-2xl'
    >
      <img src={src} alt={alt} className='size-full object-cover' />
      <div
        aria-hidden
        className={`pointer-events-none absolute top-0 left-0 overflow-hidden rounded-full shadow-xl ring-3 ring-white transition-opacity duration-150 motion-reduce:transition-none ${lens ? 'opacity-100' : 'opacity-0'}`}
        style={{
          width: lensSize,
          height: lensSize,
          transform: lens
            ? `translate(${lens.x - half}px, ${lens.y - half}px)`
            : undefined
        }}
      >
        {lens ? (
          // The photo at `zoom` times its size, shifted the other way so the
          // point under the pointer stays in the middle of the lens.
          <img
            src={zoomSrc}
            alt=''
            className='absolute top-0 left-0 max-w-none object-cover'
            style={{
              width: lens.width * zoom,
              height: lens.height * zoom,
              transform: `translate(${half - lens.x * zoom}px, ${half - lens.y * zoom}px)`
            }}
          />
        ) : null}
      </div>
    </div>
  );
}