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          <div className="grid gap-4" key={col}>
9            {/* biome-ignore lint/nursery/noShadow: false positive */}
10            {Array.from({ length: 8 }).map((_, index) => {
11              const isPortrait = Math.random() > 0.5;
12              const width = isPortrait ? 1080 : 1920;
13              const height = isPortrait ? 1920 : 1080;
14              const ratio = isPortrait ? 9 / 16 : 16 / 9;
15 
16              return (
17                <LazyImage
18                  alt={`Image ${col}-${index}`}
19                  fallback={`https://placehold.co/${width}x${height}/`}
20                  inView={true}
21                  key={`${col}-${index}`}
22                  ratio={ratio}
23                  src={`https://picsum.photos/seed/${col}-${index}/${width}/${height}`}
24                />
25              );
26            })}
27          </div>
28        ))}
29      </div>
30    </div>
31  );
32}