react-editor-shopify/components/landing/image-gallery.tsx

import { cn } from "@/lib/utils";
import { Typography } from "@/components/Typography";
import { Container } from "@/components/layout/Container";

export type ImageGalleryProps = {
  tagline: string;
  heading: string;
  subheading: string;
  layout: "grid" | "masonry" | "editorial";
  items: Array<{ src: string; alt: string; caption?: string }>;
};

export function ImageGallery({ tagline, heading, subheading, layout, items }: ImageGalleryProps) {
  return (
    <section className="bg-background py-20 md:py-28">
      <Container>
        {(tagline || heading || subheading) && (
          <div className="mx-auto mb-12 max-w-2xl text-center">
            {tagline ? (
              <p className="mb-3 text-xs uppercase tracking-[0.2em] text-muted-foreground">
                {tagline}
              </p>
            ) : null}
            {heading ? <Typography variant="h2">{heading}</Typography> : null}
            {subheading ? (
              <Typography variant="subtitle1" className="mt-3">
                {subheading}
              </Typography>
            ) : null}
          </div>
        )}

        {layout === "masonry" ? (
          <div className="columns-1 gap-4 sm:columns-2 lg:columns-3">
            {items.map((it, i) => (
              <figure key={i} className="mb-4 break-inside-avoid">
                <img
                  src={it.src}
                  alt={it.alt}
                  className="w-full rounded-md object-cover"
                />
                {it.caption ? (
                  <figcaption className="mt-2 text-xs text-muted-foreground">
                    {it.caption}
                  </figcaption>
                ) : null}
              </figure>
            ))}
          </div>
        ) : layout === "editorial" ? (
          <div className="grid grid-cols-1 gap-6 md:grid-cols-12">
            {items.slice(0, 5).map((it, i) => (
              <figure
                key={i}
                className={cn(
                  "overflow-hidden rounded-md bg-muted",
                  i === 0 && "md:col-span-7 md:row-span-2",
                  i === 1 && "md:col-span-5",
                  i === 2 && "md:col-span-5",
                  i === 3 && "md:col-span-6",
                  i === 4 && "md:col-span-6",
                )}
              >
                <img
                  src={it.src}
                  alt={it.alt}
                  className="h-full w-full object-cover"
                />
              </figure>
            ))}
          </div>
        ) : (
          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {items.map((it, i) => (
              <figure key={i}>
                <img
                  src={it.src}
                  alt={it.alt}
                  className="aspect-[4/5] w-full rounded-md object-cover"
                />
                {it.caption ? (
                  <figcaption className="mt-2 text-xs text-muted-foreground">
                    {it.caption}
                  </figcaption>
                ) : null}
              </figure>
            ))}
          </div>
        )}
      </Container>
    </section>
  );
}