@codesinger0/shared-components 1.1.65 → 1.1.67

package/dist/components/Hero.jsx

@@ -7,6 +7,8 @@ const Hero = ({
     // Media props
     mediaType = 'image', // 'video' or 'image'
     videoId = '', // YouTube video ID
+    useYoutube = true, // Use YouTube or direct video
+    videoUrl = '', // Direct video URL (when useYoutube is false)
     imageUrl = '', // Image URL for static background
     mediaHeight = '70vh', // Height of the media section
 
@@ -53,7 +55,11 @@ const Hero = ({
                 {/* Media Background Container */}
                 <div className="absolute inset-0 w-full h-full" aria-hidden="true">
                     {mediaType === 'video' ? (
-                        <FixedWidthHeroVideo useYoutube={true} youtubeVideoId={videoId} />
+                        <FixedWidthHeroVideo
+                            useYoutube={useYoutube}
+                            youtubeVideoId={videoId}
+                            videoUrl={videoUrl}
+                        />
                     ) : (
                         <div
                             className="absolute inset-0 bg-cover bg-center bg-no-repeat"

package/dist/components/LargeItemCard.jsx

@@ -1,6 +1,8 @@
-import React from 'react';
+import React, { useState } from 'react';
 import RoundButton from './elements/RoundButton.jsx'
 import { motion } from 'framer-motion'
+import ImageLightbox from './elements/ImageLightbox.jsx'
+import VideoLightbox from './elements/VideoLightbox.jsx'
 
 const LargeItemCard = ({
   imageUrl,
@@ -22,6 +24,9 @@ const LargeItemCard = ({
   icons = [],
   classNames = {}
 }) => {
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+  const [videoLightboxOpen, setVideoLightboxOpen] = useState(false);
+
   const {
     card: cardClass = 'glass-card',
     title: titleClass = 'title',
@@ -30,27 +35,33 @@ const LargeItemCard = ({
     price: priceClass = 'text-price',
   } = classNames;
 
-  const MediaElement = ({ className, style }) => {
+  const handleMediaClick = () => {
+    if (contentType === 'video') {
+      setVideoLightboxOpen(true);
+    } else {
+      setLightboxOpen(true);
+    }
+  };
+
+  const MediaElement = ({ className, style, clickable = false }) => {
     const scaleStyle = {
       ...style,
       transform: `scale(${mediaScale})`,
       transformOrigin: 'center'
     };
-    if (contentType === 'video') {
-      return (
-        <video
-          autoPlay
-          muted
-          loop
-          playsInline
-          className={`rounded-lg shadow-2xl border border-primary max-w-full ${className}`}
-          style={{ ...scaleStyle, objectFit: 'contain' }}
-        >
-          <source src={videoUrl} type="video/mp4" />
-        </video>
-      );
-    }
-    return (
+
+    const mediaContent = contentType === 'video' ? (
+      <video
+        autoPlay
+        muted
+        loop
+        playsInline
+        className={`rounded-lg shadow-2xl border border-primary max-w-full ${className}`}
+        style={{ ...scaleStyle, objectFit: 'contain' }}
+      >
+        <source src={videoUrl} type="video/mp4" />
+      </video>
+    ) : (
       <img
         src={imageUrl}
         alt={title}
@@ -58,6 +69,20 @@ const LargeItemCard = ({
         style={scaleStyle}
       />
     );
+
+    if (clickable) {
+      return (
+        <button
+          onClick={handleMediaClick}
+          className="cursor-pointer hover:opacity-90 transition-opacity duration-200 p-0 border-0 bg-transparent"
+          aria-label={contentType === 'video' ? 'Open video in fullscreen' : 'Open image in fullscreen'}
+        >
+          {mediaContent}
+        </button>
+      );
+    }
+
+    return mediaContent;
   };
 
   return (
@@ -160,6 +185,7 @@ const LargeItemCard = ({
                       width: 'auto',
                       height: 'auto'
                     }}
+                    clickable={true}
                   />
                 </motion.div>
               </div>
@@ -171,6 +197,7 @@ const LargeItemCard = ({
         <div className="block lg:hidden mt-8 w-full">
           <MediaElement
             className="w-full h-auto rounded-none shadow-2xls"
+            clickable={true}
           />
         </div>
       </div>
@@ -206,11 +233,33 @@ const LargeItemCard = ({
                   width: 'auto',
                   height: 'auto'
                 }}
+                clickable={true}
               />
             </motion.div>
           </div>
         </div>
       )}
+
+      {/* Image Lightbox */}
+      {contentType === 'image' && imageUrl && (
+        <ImageLightbox
+          images={[imageUrl]}
+          currentIndex={0}
+          isOpen={lightboxOpen}
+          onClose={() => setLightboxOpen(false)}
+          onNavigate={() => {}}
+        />
+      )}
+
+      {/* Video Lightbox */}
+      {contentType === 'video' && videoUrl && (
+        <VideoLightbox
+          videoUrl={videoUrl}
+          isOpen={videoLightboxOpen}
+          onClose={() => setVideoLightboxOpen(false)}
+          title={title}
+        />
+      )}
     </section>
   );
 };

package/dist/components/MasonryItemCard.jsx

@@ -1,7 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import { X, ChevronLeft, ChevronRight } from 'lucide-react';
-import useScrollLock from '../hooks/useScrollLock'
+import ImageLightbox from './elements/ImageLightbox'
 
 const MasonryImageList = ({ images = [], cols = 3, onImageClick = () => { } }) => {
   // cols is the desktop column count; mobile will be forced to 2 via CSS
@@ -81,108 +79,6 @@ const MasonryImageList = ({ images = [], cols = 3, onImageClick = () => { } }) =
   );
 };
 
-// Image lightbox modal component
-const ImageLightbox = ({
-  images,
-  currentIndex,
-  isOpen,
-  onClose,
-  onNavigate
-}) => {
-  const currentImage = images[currentIndex];
-
-  useScrollLock(isOpen);
-
-  if (!currentImage) return null;
-
-  return (
-    <AnimatePresence>
-      {isOpen && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center supports-[height:100dvh]:h-[100dvh]">
-          {/* Backdrop */}
-          <motion.div
-            key="backdrop"
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            transition={{ duration: 0.2 }}
-            className="absolute inset-0 bg-black bg-opacity-90"
-            onClick={onClose}
-          />
-
-          {/* Image Container */}
-          <motion.div
-            key="image-container"
-            initial={{ opacity: 0, scale: 0.8 }}
-            animate={{ opacity: 1, scale: 1 }}
-            exit={{ opacity: 0, scale: 0.8 }}
-            transition={{ type: "spring", stiffness: 300, damping: 25 }}
-            className="relative max-w-[90vw] max-h-[90vh] z-10"
-            onClick={(e) => e.stopPropagation()}
-          >
-            {/* Main Image */}
-            <img
-              src={currentImage.src}
-              alt={currentImage.alt || currentImage.title || 'Gallery image'}
-              className="w-screen h-screen object-contain rounded-lg shadow-2xl"
-            />
-
-            {/* Close Button */}
-            <button
-              onClick={onClose}
-              className="absolute top-4 right-4 bg-black bg-opacity-50 hover:bg-opacity-70 text-white p-2 rounded-full transition-all duration-200"
-              aria-label="Close lightbox"
-            >
-              <X size={24} />
-            </button>
-
-            {/* Navigation Arrows */}
-            {images.length > 1 && (
-              <>
-                {currentIndex > 0 && (
-                  <button
-                    onClick={() => onNavigate(currentIndex - 1)}
-                    className="absolute left-4 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 hover:bg-opacity-70 text-white p-3 rounded-full transition-all duration-200"
-                    aria-label="Previous image"
-                  >
-                    <ChevronLeft size={24} />
-                  </button>
-                )}
-
-                {currentIndex < images.length - 1 && (
-                  <button
-                    onClick={() => onNavigate(currentIndex + 1)}
-                    className="absolute right-4 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 hover:bg-opacity-70 text-white p-3 rounded-full transition-all duration-200"
-                    aria-label="Next image"
-                  >
-                    <ChevronRight size={24} />
-                  </button>
-                )}
-              </>
-            )}
-
-            {/* Image Counter */}
-            {images.length > 1 && (
-              <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-black bg-opacity-50 text-white px-3 py-1 rounded-full text-sm">
-                {currentIndex + 1} / {images.length}
-              </div>
-            )}
-
-            {/* Image Title */}
-            {currentImage.title && (
-              <div className="absolute bottom-4 right-4 bg-black bg-opacity-50 text-white px-3 py-2 rounded-lg max-w-xs">
-                <div className="text-sm font-medium" dir="rtl">
-                  {currentImage.title}
-                </div>
-              </div>
-            )}
-          </motion.div>
-        </div>
-      )}
-    </AnimatePresence>
-  );
-};
-
 const MasonryItemCard = ({
   images = [],
   title,

package/dist/components/elements/FixedWidthHeroVideo.jsx

@@ -1,6 +1,10 @@
 import React, { useState, useEffect } from 'react';
 
-const FixedWidthHeroVideo = ({ youtubeVideoId = "dQw4w9WgXcQ", useYoutube = false }) => {
+const FixedWidthHeroVideo = ({
+  youtubeVideoId = "dQw4w9WgXcQ",
+  useYoutube = false,
+  videoUrl = "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
+}) => {
   const [viewportSize, setViewportSize] = useState({ width: 0, height: 0 });
 
   useEffect(() => {
@@ -56,7 +60,7 @@ const FixedWidthHeroVideo = ({ youtubeVideoId = "dQw4w9WgXcQ", useYoutube = fals
             loop
             playsInline
           >
-            <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
+            <source src={videoUrl} type="video/mp4" />
             Your browser does not support the video tag.
           </video>
         )}
@@ -81,6 +85,7 @@ const FixedWidthHeroVideo = ({ youtubeVideoId = "dQw4w9WgXcQ", useYoutube = fals
 
 // Usage examples:
 // <FixedWidthHeroVideo useYoutube={false} />
+// <FixedWidthHeroVideo useYoutube={false} videoUrl="path/to/your/video.mp4" />
 // <FixedWidthHeroVideo useYoutube={true} youtubeVideoId="dQw4w9WgXcQ" />
 
 export default FixedWidthHeroVideo;

package/dist/components/elements/ImageLightbox.jsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X, ChevronLeft, ChevronRight } from 'lucide-react';
+import useScrollLock from '../../hooks/useScrollLock';
+
+const ImageLightbox = ({
+  images,
+  currentIndex,
+  isOpen,
+  onClose,
+  onNavigate
+}) => {
+  const currentImage = images[currentIndex];
+
+  useScrollLock(isOpen);
+
+  if (!currentImage) return null;
+
+  // Handle both object format {src, alt, title} and string format
+  const imageSrc = typeof currentImage === 'string' ? currentImage : currentImage.src;
+  const imageAlt = typeof currentImage === 'string' ? 'Gallery image' : (currentImage.alt || currentImage.title || 'Gallery image');
+  const imageTitle = typeof currentImage === 'string' ? null : currentImage.title;
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center supports-[height:100dvh]:h-[100dvh]">
+          {/* Backdrop */}
+          <motion.div
+            key="backdrop"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className="absolute inset-0 bg-black bg-opacity-90"
+            onClick={onClose}
+          />
+
+          {/* Image Container */}
+          <motion.div
+            key="image-container"
+            initial={{ opacity: 0, scale: 0.8 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.8 }}
+            transition={{ type: "spring", stiffness: 300, damping: 25 }}
+            className="relative max-w-[90vw] max-h-[90vh] z-10"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {/* Main Image */}
+            <img
+              src={imageSrc}
+              alt={imageAlt}
+              className="w-screen h-screen object-contain rounded-lg shadow-2xl"
+            />
+
+            {/* Close Button */}
+            <button
+              onClick={onClose}
+              className="absolute top-4 right-4 bg-black bg-opacity-50 hover:bg-opacity-70 text-white p-2 rounded-full transition-all duration-200"
+              aria-label="Close lightbox"
+            >
+              <X size={24} />
+            </button>
+
+            {/* Navigation Arrows */}
+            {images.length > 1 && (
+              <>
+                {currentIndex > 0 && (
+                  <button
+                    onClick={() => onNavigate(currentIndex - 1)}
+                    className="absolute left-4 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 hover:bg-opacity-70 text-white p-3 rounded-full transition-all duration-200"
+                    aria-label="Previous image"
+                  >
+                    <ChevronLeft size={24} />
+                  </button>
+                )}
+
+                {currentIndex < images.length - 1 && (
+                  <button
+                    onClick={() => onNavigate(currentIndex + 1)}
+                    className="absolute right-4 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 hover:bg-opacity-70 text-white p-3 rounded-full transition-all duration-200"
+                    aria-label="Next image"
+                  >
+                    <ChevronRight size={24} />
+                  </button>
+                )}
+              </>
+            )}
+
+            {/* Image Counter */}
+            {images.length > 1 && (
+              <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-black bg-opacity-50 text-white px-3 py-1 rounded-full text-sm">
+                {currentIndex + 1} / {images.length}
+              </div>
+            )}
+
+            {/* Image Title */}
+            {imageTitle && (
+              <div className="absolute bottom-4 right-4 bg-black bg-opacity-50 text-white px-3 py-2 rounded-lg max-w-xs">
+                <div className="text-sm font-medium" dir="rtl">
+                  {imageTitle}
+                </div>
+              </div>
+            )}
+          </motion.div>
+        </div>
+      )}
+    </AnimatePresence>
+  );
+};
+
+export default ImageLightbox;

package/dist/components/elements/VideoLightbox.jsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X } from 'lucide-react';
+import useScrollLock from '../../hooks/useScrollLock';
+
+const VideoLightbox = ({
+  videoUrl,
+  isOpen,
+  onClose,
+  title
+}) => {
+  useScrollLock(isOpen);
+
+  if (!videoUrl) return null;
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center supports-[height:100dvh]:h-[100dvh]">
+          {/* Backdrop */}
+          <motion.div
+            key="backdrop"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className="absolute inset-0 bg-black bg-opacity-90"
+            onClick={onClose}
+          />
+
+          {/* Video Container */}
+          <motion.div
+            key="video-container"
+            initial={{ opacity: 0, scale: 0.8 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.8 }}
+            transition={{ type: "spring", stiffness: 300, damping: 25 }}
+            className="relative max-w-[90vw] max-h-[90vh] z-10"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {/* Main Video */}
+            <video
+              src={videoUrl}
+              controls
+              autoPlay
+              className="w-screen h-screen object-contain rounded-lg shadow-2xl"
+              style={{ maxWidth: '90vw', maxHeight: '90vh' }}
+            >
+              Your browser does not support the video tag.
+            </video>
+
+            {/* Close Button */}
+            <button
+              onClick={onClose}
+              className="absolute top-4 right-4 bg-black bg-opacity-50 hover:bg-opacity-70 text-white p-2 rounded-full transition-all duration-200"
+              aria-label="Close lightbox"
+            >
+              <X size={24} />
+            </button>
+
+            {/* Video Title */}
+            {title && (
+              <div className="absolute bottom-4 right-4 bg-black bg-opacity-50 text-white px-3 py-2 rounded-lg max-w-xs">
+                <div className="text-sm font-medium" dir="rtl">
+                  {title}
+                </div>
+              </div>
+            )}
+          </motion.div>
+        </div>
+      )}
+    </AnimatePresence>
+  );
+};
+
+export default VideoLightbox;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codesinger0/shared-components",
-  "version": "1.1.65",
+  "version": "1.1.67",
   "description": "Shared React components for customer projects",
   "main": "dist/index.js",
   "files": [