Квадратные миниатюры в сетке. По клику фото пружинно вырастает из своей ячейки в полноэкранный просмотр с исходными пропорциями. Между фото можно листать свайпом, стрелками на экране или клавишами влево и вправо, а у краёв жест упруго сопротивляется.
Чтобы закрыть просмотр, фото можно потянуть вниз — оно уменьшается, фон тускнеет, и после отпускания фото возвращается в свою ячейку. Также работают крестик, клик по фону и Escape.
Скопируйте эти файлы в components/photo-lightbox/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { PhotoLightbox } from "@/components/photo-lightbox/photo-lightbox";
const images = [
{ src: "/sea.webp", alt: "Море" },
{ src: "/dunes.webp", alt: "Дюны" },
{ src: "/mountains.webp", alt: "Горы" },
];
export function Gallery() {
return <PhotoLightbox images={images} columns={3} />;
}imagesФото: src, необязательные alt, width, height
Тип PhotoLightboxImage[]
columns?Число колонок сетки
Тип number·По умолчанию 3
gap?Отступ между миниатюрами в пикселях
Тип number·По умолчанию 8
rounded?Скругление миниатюр и фото в просмотре
Тип number·По умолчанию 14
className?Классы сетки
Тип string