67 lines
1.9 KiB
TypeScript
67 lines
1.9 KiB
TypeScript
import { useState } from 'react';
|
|
import './blocks.css';
|
|
|
|
export interface ImageGalleryBlockProps {
|
|
title?: string;
|
|
subtitle?: string;
|
|
images: Array<{
|
|
url: string;
|
|
alt?: string;
|
|
caption?: string;
|
|
thumbnailUrl?: string;
|
|
}>;
|
|
columns?: 2 | 3 | 4;
|
|
variant?: 'grid' | 'masonry' | 'carousel';
|
|
lightbox?: boolean;
|
|
}
|
|
|
|
export function ImageGalleryBlock({
|
|
title,
|
|
subtitle,
|
|
images,
|
|
columns = 3,
|
|
variant = 'grid',
|
|
lightbox = false
|
|
}: ImageGalleryBlockProps) {
|
|
const [selectedImage, setSelectedImage] = useState<number | null>(null);
|
|
|
|
return (
|
|
<section className={`shared-image-gallery shared-image-gallery--${variant}`}>
|
|
{title && <h2 className="shared-image-gallery__title">{title}</h2>}
|
|
{subtitle && <p className="shared-image-gallery__subtitle">{subtitle}</p>}
|
|
<div className={`shared-image-gallery__grid shared-image-gallery__grid--${columns}`}>
|
|
{images.map((image, index) => (
|
|
<div
|
|
key={index}
|
|
className="shared-image-gallery__item"
|
|
onClick={() => lightbox && setSelectedImage(index)}
|
|
>
|
|
<img
|
|
src={image.thumbnailUrl || image.url}
|
|
alt={image.alt || image.caption || `Image ${index + 1}`}
|
|
className="shared-image-gallery__image"
|
|
loading="lazy"
|
|
/>
|
|
{image.caption && (
|
|
<p className="shared-image-gallery__caption">{image.caption}</p>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
{lightbox && selectedImage !== null && (
|
|
<div
|
|
className="shared-image-gallery__lightbox"
|
|
onClick={() => setSelectedImage(null)}
|
|
>
|
|
<img
|
|
src={images[selectedImage].url}
|
|
alt={images[selectedImage].alt || images[selectedImage].caption || 'Lightbox image'}
|
|
className="shared-image-gallery__lightbox-image"
|
|
/>
|
|
</div>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|
|
|