phase 6 ,7,9

frontend/src/components/shared/blocks/ImageGalleryBlock.tsx

@@ -0,0 +1,66 @@
+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>
+  );
+}
+