image-gallery-1

1import { LazyImage } from "./lazy-image";
2 
3export function ImageGallery() {
4  return (
5    <div className="relative flex min-h-screen w-full flex-col items-center justify-center px-4 py-10">
6      <div className="mx-auto grid w-full max-w-5xl grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4 md:gap-6">
7        {Array.from({ length: 4 }).map((_, col) => (
8          // biome-ignore lint/suspicious/noArrayIndexKey: fixed gallery layout
9          <div className="grid gap-4" key={`col-${col}`}>
10            {/* biome-ignore lint/nursery/noShadow: false positive */}
11            {Array.from({ length: 8 }).map((_, index) => {
12              const isPortrait = Math.random() > 0.5;
13              const width = isPortrait ? 1080 : 1920;
14              const height = isPortrait ? 1920 : 1080;
15              const ratio = isPortrait ? 9 / 16 : 16 / 9;
16 
17              return (
18                <LazyImage
19                  alt={`Image ${col}-${index}`}
20                  fallback={`https://placehold.co/${width}x${height}/`}
21                  inView={true}
22                  // biome-ignore lint/suspicious/noArrayIndexKey: fixed gallery image seed
23                  key={`img-${col}-${index}`}
24                  ratio={ratio}
25                  src={`https://picsum.photos/seed/${col}-${index}/${width}/${height}`}
26                />
27              );
28            })}
29          </div>
30        ))}
31      </div>
32    </div>
33  );
34}