Initial commit for iiEasy: all files included

components/GalleryComponent.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { GalleryItem } from '../types';
+import { PhotoIcon, VideoCameraIcon } from './icons'; // Assuming these exist or will be added
+
+interface GalleryComponentProps {
+  items: GalleryItem[] | undefined;
+  title?: string;
+}
+
+const GalleryComponent: React.FC<GalleryComponentProps> = ({ items, title }) => {
+  if (!items || items.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="py-8 md:py-12">
+      {title && (
+        <h2 className="font-quicksand text-2xl sm:text-3xl font-bold text-slate-800 mb-6 md:mb-8 text-center">
+          {title}
+        </h2>
+      )}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
+        {items.map((item) => (
+          <div key={item.id} className="group relative bg-slate-100 rounded-lg overflow-hidden">
+            <div className="aspect-[16/9] w-full">
+              {item.type === 'image' ? (
+                <img
+                  src={item.url}
+                  alt={item.altText || item.caption || 'Gallery image'}
+                  className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
+                  loading="lazy"
+                />
+              ) : item.type === 'video' ? (
+                <video
+                  src={item.url}
+                  controls
+                  className="w-full h-full object-cover"
+                  poster={item.altText} // Use altText as poster if available
+                />
+              ) : (
+                <div className="w-full h-full flex items-center justify-center bg-slate-200">
+                  <PhotoIcon className="w-16 h-16 text-slate-400" /> {/* Fallback icon */}
+                </div>
+              )}
+            </div>
+            {item.caption && (
+              <div className="absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black/70 to-transparent transition-opacity duration-300 opacity-0 group-hover:opacity-100">
+                <p className="text-white text-sm font-inter leading-snug line-clamp-2">{item.caption}</p>
+              </div>
+            )}
+            {/* Icon overlay for type indication, optional */}
+            <div className="absolute top-2 right-2 p-1.5 bg-black/40 rounded-full text-white opacity-80 group-hover:opacity-100 transition-opacity duration-300">
+              {item.type === 'image' ? <PhotoIcon className="w-4 h-4" /> : <VideoCameraIcon className="w-4 h-4" />}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default GalleryComponent;