🖼️ added images support

- Should investigate how to resize the image from .md specs

components/blog/ImageGallery.tsx

@@ -0,0 +1,79 @@
+'use client'
+
+import { useState } from 'react'
+import { OptimizedImage } from './OptimizedImage'
+
+interface ImageItem {
+  src: string
+  alt: string
+  caption?: string
+}
+
+interface ImageGalleryProps {
+  images: ImageItem[]
+  columns?: 2 | 3 | 4
+  className?: string
+}
+
+export function ImageGallery({ images, columns = 3, className = '' }: ImageGalleryProps) {
+  const [selectedImage, setSelectedImage] = useState<ImageItem | null>(null)
+
+  const gridCols = {
+    2: 'grid-cols-1 md:grid-cols-2',
+    3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+    4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
+  }
+
+  return (
+    <>
+      <div className={`grid ${gridCols[columns]} gap-4 ${className}`}>
+        {images.map((image, index) => (
+          <button
+            key={index}
+            onClick={() => setSelectedImage(image)}
+            className="group relative overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900/50 transition-all hover:border-emerald-500 hover:shadow-lg hover:shadow-emerald-500/20"
+          >
+            <div className="aspect-video relative">
+              <img
+                src={image.src}
+                alt={image.alt}
+                className="w-full h-full object-cover transition-transform group-hover:scale-105"
+              />
+            </div>
+            {image.caption && <div className="p-2 text-sm text-zinc-400">{image.caption}</div>}
+          </button>
+        ))}
+      </div>
+
+      {selectedImage && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 p-4"
+          onClick={() => setSelectedImage(null)}
+        >
+          <button
+            className="absolute top-4 right-4 text-zinc-400 hover:text-zinc-100 transition-colors"
+            onClick={() => setSelectedImage(null)}
+          >
+            <svg className="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </button>
+          <div className="max-w-5xl w-full" onClick={e => e.stopPropagation()}>
+            <OptimizedImage
+              src={selectedImage.src}
+              alt={selectedImage.alt}
+              caption={selectedImage.caption}
+              width={1200}
+              height={800}
+            />
+          </div>
+        </div>
+      )}
+    </>
+  )
+}