44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
import AnimateItems from '@/components/AnimateItems';
|
|
import { Photo } from '.';
|
|
import PhotoLarge from './PhotoLarge';
|
|
import { RevalidatePhoto } from './InfinitePhotoScroll';
|
|
|
|
export default function PhotosLarge({
|
|
photos,
|
|
animate = true,
|
|
prefetchFirstPhotoLinks,
|
|
onLastPhotoVisible,
|
|
revalidatePhoto,
|
|
}: {
|
|
photos: Photo[]
|
|
animate?: boolean
|
|
prefetchFirstPhotoLinks?: boolean
|
|
onLastPhotoVisible?: () => void
|
|
revalidatePhoto?: RevalidatePhoto
|
|
}) {
|
|
return (
|
|
<AnimateItems
|
|
className="space-y-1"
|
|
type={animate ? 'scale' : 'none'}
|
|
duration={0.7}
|
|
staggerDelay={0.15}
|
|
distanceOffset={0}
|
|
staggerOnFirstLoadOnly
|
|
items={photos.map((photo, index) =>
|
|
<PhotoLarge
|
|
key={photo.id}
|
|
photo={photo}
|
|
priority={index <= 1}
|
|
prefetchRelatedLinks={prefetchFirstPhotoLinks && index === 0}
|
|
revalidatePhoto={revalidatePhoto}
|
|
shouldZoomOnFKeydown={false}
|
|
onVisible={index === photos.length - 1
|
|
? onLastPhotoVisible
|
|
: undefined}
|
|
debugImageFallback={index === 0}
|
|
/>)}
|
|
itemKeys={photos.map(photo => photo.id)}
|
|
/>
|
|
);
|
|
}
|