Image Gallery

1"use client";
2 
3import "./styles.css";
4import { cn } from "./_adapter";
5import { ImageGalleryProvider } from "./context";
6import { GalleryGrid } from "./gallery-grid";
7import { GalleryLightbox } from "./gallery-lightbox";
8import type { ImageGalleryProps } from "./schema";
9 
10export function ImageGallery({
11  id,
12  images,
13  title,
14  description,
15  className,
16  onImageClick,
17}: ImageGalleryProps) {
18  const handleImageClick = (imageId: string) => {
19    if (!onImageClick) return;
20 
21    const image = images.find((img) => img.id === imageId);
22    if (image) {
23      onImageClick(imageId, image);
24    }
25  };
26 
27  return (
28    <article
29      className={cn("relative w-full min-w-80 max-w-lg", className)}
30      data-tool-ui-id={id}
31      data-slot="image-gallery"
32    >
33      <div
34        className={cn(
35          "@container relative isolate flex w-full min-w-0 flex-col rounded-xl",
36          "border border-border bg-card text-sm shadow-xs",
37        )}
38      >
39        <ImageGalleryProvider images={images}>
40          <Header title={title} description={description} />
41          <div className="p-3">
42            <GalleryGrid onImageClick={handleImageClick} />
43          </div>
44          <GalleryLightbox />
45        </ImageGalleryProvider>
46      </div>
47    </article>
48  );
49}
50 
51interface HeaderProps {
52  title?: string;
53  description?: string;
54}
55 
56function Header({ title, description }: HeaderProps) {
57  if (!title && !description) {
58    return null;
59  }
60 
61  return (
62    <div className="border-border/60 border-b px-4 pt-4 pb-3">
63      {title && (
64        <h3 className="text-[15px] leading-tight font-semibold tracking-tight">
65          {title}
66        </h3>
67      )}
68      {description && (
69        <p className="text-muted-foreground mt-1 text-sm leading-snug">
70          {description}
71        </p>
72      )}
73    </div>
74  );
75}