@codesinger0/shared-components 1.1.56 → 1.1.58

package/dist/components/SmallItemsGrid.jsx

@@ -1,308 +0,0 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import SmallItemCard from './SmallItemCard';
-import CTAButton from './elements/CTAButton';
-import useEmblaCarousel from 'embla-carousel-react';
-import Autoplay from 'embla-carousel-autoplay';
-import { useItemModal } from '../context/ItemModalContext'
-
-const SmallItemsGrid = ({
-    maxRows = null,
-    showMoreType = 'button',
-    headerText = '',
-    className = '',
-    items,
-    onAddToCart,
-    autoplay = true,
-    isLighter = false,
-    ...props
-}) => {
-
-    const [showAllItems, setShowAllItems] = useState(false);
-    const { openModal } = useItemModal()
-
-    // Embla carousel setup
-    const autoplayOptions = {
-        delay: 3000,
-        stopOnInteraction: true,
-        stopOnMouseEnter: true,
-        rootNode: (emblaRoot) => emblaRoot.parentElement,
-    };
-
-    const plugins = autoplay ? [Autoplay(autoplayOptions)] : [];
-
-    const [emblaRef, emblaApi] = useEmblaCarousel(
-        {
-            loop: true,
-            dragFree: true,
-            containScroll: 'trimSnaps',
-            slidesToScroll: 1,
-            direction: 'rtl'
-        },
-        plugins
-    );
-
-    const [prevBtnEnabled, setPrevBtnEnabled] = useState(false);
-    const [nextBtnEnabled, setNextBtnEnabled] = useState(false);
-    const [selectedIndex, setSelectedIndex] = useState(0);
-    const [scrollSnaps, setScrollSnaps] = useState([]);
-
-    const scrollPrev = useCallback(() => emblaApi && emblaApi.scrollPrev(), [emblaApi]);
-    const scrollNext = useCallback(() => emblaApi && emblaApi.scrollNext(), [emblaApi]);
-    const scrollTo = useCallback((index) => emblaApi && emblaApi.scrollTo(index), [emblaApi]);
-
-    const onSelect = useCallback(() => {
-        if (!emblaApi) return;
-        setSelectedIndex(emblaApi.selectedScrollSnap());
-        setPrevBtnEnabled(emblaApi.canScrollPrev());
-        setNextBtnEnabled(emblaApi.canScrollNext());
-    }, [emblaApi]);
-
-    useEffect(() => {
-        if (!emblaApi) return;
-        onSelect();
-        setScrollSnaps(emblaApi.scrollSnapList());
-        emblaApi.on('select', onSelect);
-        emblaApi.on('reInit', onSelect);
-    }, [emblaApi, onSelect]);
-
-    const handleCardClick = (item) => {
-        openModal(item)
-    };
-
-    const toggleShowMore = () => {
-        setShowAllItems(!showAllItems);
-    };
-
-    // Calculate items per row based on CSS grid configuration
-    const getItemsPerRow = () => {
-        return window.innerWidth >= 768 ? 5 : 2; // md:grid-cols-5, grid-cols-2
-    };
-
-    // Calculate max items to show based on rows
-    const calculateMaxItems = () => {
-        if (!maxRows) return null;
-        return maxRows * getItemsPerRow();
-    };
-
-    // Determine if we need overflow handling
-    const maxItemsToShow = calculateMaxItems();
-    const needsOverflow = maxRows && items.length > maxItemsToShow;
-
-    // Calculate displayed items for button mode
-    const displayedItems = needsOverflow && !showAllItems
-        ? items.slice(0, maxItemsToShow)
-        : items;
-
-    const GridComponent = ({ items: gridItems }) => (
-        <div className="grid grid-cols-2 md:grid-cols-5 gap-4 md:gap-6">
-            {gridItems.map(item => (
-                <SmallItemCard
-                    key={item.id}
-                    imageUrl={item.imageUrl}
-                    label={item.name}
-                    description={item.description}
-                    price={item.price}
-                    discountPrice={item.discountPrice}
-                    onClick={() => handleCardClick(item)}
-                    onAddToCart={() => onAddToCart(item)}
-                    className="hover:shadow-xl"
-                />
-            ))}
-        </div>
-    );
-
-    return (
-        <section className={`py-8 px-0 bg-main ${className}`} {...props}>
-            <div className="max-w-6xl mx-auto">
-                <h2 className={`${isLighter ? 'lighterTitle' : 'title'} text-center mb-12`}>{headerText}</h2>
-
-                {showMoreType === 'carousel' ? (
-                    // Embla Carousel Mode - infinite with autoscroll
-                    <div className="embla" dir="rtl">
-                        <div className="embla__viewport" ref={emblaRef}>
-                            <div className="embla__container">
-                                {items.map(item => (
-                                    <div key={item.id} className="embla__slide">
-                                        <SmallItemCard
-                                            imageUrl={item.imageUrl}
-                                            label={item.name}
-                                            description={item.description}
-                                            price={item.price}
-                                            discountPrice={item.discountPrice}
-                                            onClick={() => handleCardClick(item)}
-                                            onAddToCart={() => onAddToCart(item)}
-                                            className="h-full flex flex-col" />
-                                    </div>
-                                ))}
-                            </div>
-                        </div>
-
-                        {/* Dots indicator */}
-                        <div className="embla__dots">
-                            {scrollSnaps.map((_, index) => (
-                                <button
-                                    key={index}
-                                    className={`embla__dot ${index === selectedIndex ? 'embla__dot--selected' : ''}`}
-                                    onClick={() => scrollTo(index)}
-                                />
-                            ))}
-                        </div>
-
-                        {/* Navigation buttons */}
-                        {!isLighter && <div className="embla__controls">
-                            <button
-                                className="embla__button embla__button--prev"
-                                onClick={scrollPrev}
-                                disabled={!prevBtnEnabled}
-                            >
-                                <svg className="embla__button__svg" viewBox="0 0 24 24">
-                                    <path d="M9 18l6-6-6-6" />
-                                </svg>
-                            </button>
-                            <button
-                                className="embla__button embla__button--next"
-                                onClick={scrollNext}
-                                disabled={!nextBtnEnabled}
-                            >
-                                <svg className="embla__button__svg" viewBox="0 0 24 24">
-                                    <path d="M15 18l-6-6 6-6" />
-                                </svg>
-                            </button>
-                        </div>}
-                    </div>
-                ) : (
-                    // Grid Mode (default or button)
-                    <>
-                        <GridComponent items={displayedItems} />
-
-                        {/* Show More Button */}
-                        {needsOverflow && showMoreType === 'button' && (
-                            <div className="text-center mt-8">
-                                <CTAButton onClick={toggleShowMore}>
-                                    {showAllItems ? 'ראה פחות' : `ראה עוד (${items.length - maxItemsToShow} נוספים)`}
-                                </CTAButton>
-                            </div>
-                        )}
-                    </>
-                )}
-            </div>
-
-            {/* Embla Carousel Styles */}
-            <style jsx>{`
-                .embla {
-                    max-width: 100%;
-                    margin: 0 auto;
-                }
-                
-                .embla__viewport {
-                    overflow: hidden;
-                }
-                
-                .embla__container {
-                    display: flex;
-                    user-select: none;
-                    -webkit-touch-callout: none;
-                    -khtml-user-select: none;
-                    -webkit-tap-highlight-color: transparent;
-                }
-                
-                .embla__slide {
-                    flex: 0 0 60%;
-                    min-width: 0;
-                    padding-left: 0.6rem;
-                    padding-right: 0.6rem;
-                }
-                
-                @media (min-width: 768px) {
-                    .embla__slide {
-                        flex: 0 0 33.333333%;
-                    }
-                }
-                
-                @media (min-width: 1024px) {
-                    .embla__slide {
-                        flex: 0 0 25%;
-                        min-width: 200px;
-                    }
-                }
-                
-                @media (min-width: 1280px) {
-                    .embla__slide {
-                        flex: 0 0 25%;
-                        min-width: 260px;
-                    }
-                }
-                
-                .embla__controls {
-                    display: flex;
-                    justify-content: center;
-                    gap: 1rem;
-                    margin-top: 2rem;
-                }
-                
-                .embla__button {
-                    background-color: var(--primary);
-                    color: white;
-                    border: none;
-                    width: 2.5rem;
-                    height: 2.5rem;
-                    border-radius: 50%;
-                    cursor: pointer;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    transition: all 0.2s ease;
-                }
-                
-                .embla__button:hover:not(:disabled) {
-                    background-color: color-mix(in srgb, var(--primary) 80%, black);
-                    transform: scale(1.1);
-                }
-                
-                .embla__button:disabled {
-                    opacity: 0.5;
-                    cursor: not-allowed;
-                }
-                
-                .embla__button__svg {
-                    width: 1rem;
-                    height: 1rem;
-                    fill: none;
-                    stroke: currentColor;
-                    stroke-width: 2;
-                    stroke-linecap: round;
-                    stroke-linejoin: round;
-                }
-                
-                .embla__dots {
-                    display: flex;
-                    justify-content: center;
-                    gap: 0.5rem;
-                    margin-top: 1rem;
-                }
-                
-                .embla__dot {
-                    background-color: var(--primary);
-                    border: none;
-                    width: 0.5rem;
-                    height: 0.5rem;
-                    border-radius: 50%;
-                    cursor: pointer;
-                    opacity: 0.3;
-                    transition: all 0.2s ease;
-                }
-                
-                .embla__dot--selected {
-                    opacity: 1;
-                    transform: scale(1.2);
-                }
-                
-                .embla__dot:hover {
-                    opacity: 0.7;
-                }
-            `}</style>
-        </section>
-    );
-};
-
-export default SmallItemsGrid;

package/dist/components/TextListCards.jsx

@@ -1,107 +0,0 @@
-import React from 'react';
-import { motion } from 'framer-motion';
-import { CircleCheck } from 'lucide-react';
-
-const TextListCards = ({
-  title,
-  subtitle,
-  items = [],
-  className = '',
-  ...props
-}) => {
-  if (!items || items.length === 0) {
-    return (
-      <section className={`py-20 bg-main ${className}`} {...props}>
-        <div className="max-w-7xl mx-auto px-6 text-center" dir="rtl">
-          {title && <h2 className="title mb-4">{title}</h2>}
-          {subtitle && <p className="subtitle">{subtitle}</p>}
-          <p className="content-text mt-8">אין פריטים להצגה</p>
-        </div>
-      </section>
-    );
-  }
-
-  return (
-    <section className={`py-20 ${className}`} {...props}>
-      <div className="max-w-6xl mx-auto">
-        {/* Header Section */}
-        {(title || subtitle) && (
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            className="text-center mb-16"
-            dir="rtl"
-          >
-            {title && (
-              <h2 className="title mb-6">
-                {title}
-              </h2>
-            )}
-            
-            {subtitle && (
-              <p className="subtitle max-w-3xl mx-auto mt-6">
-                {subtitle}
-              </p>
-            )}
-          </motion.div>
-        )}
-
-        {/* Cards Grid */}
-        <div className="grid lg:grid-cols-3 gap-6">
-          {items.map((item, index) => (
-            <motion.div
-              key={item.title || index}
-              initial={{ opacity: 0, y: 20 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{ delay: index * 0.2 }}
-              className="h-full"
-            >
-              <div className="glass-card h-full p-6 text-center hover:scale-105 transition-all duration-300">
-                {/* Icon */}
-                {item.icon && (
-                  <div className="w-16 h-16 bg-gradient-to-br from-primary to-primary-bright rounded-full flex items-center justify-center mx-auto mb-6">
-                    <item.icon className="w-8 h-8 text-white" />
-                  </div>
-                )}
-                
-                {/* Title */}
-                <h3 className="subtitle font-bold mb-6" dir="rtl">
-                  {item.title}
-                </h3>
-                
-                {/* Points List */}
-                {item.points && item.points.length > 0 && (
-                  <ul className="space-y-3" dir="rtl">
-                    {item.points.map((point, i) => (
-                      <li key={i} className="flex flex-col items-center md:flex-row md:items-start">
-                        <CircleCheck className="w-5 h-5 text-primary mt-1 ml-2 flex-shrink-0" />
-                        <span className="content-text text-center md:text-right">{point}</span>
-                      </li>
-                    ))}
-                  </ul>
-                )}
-              </div>
-            </motion.div>
-          ))}
-        </div>
-      </div>
-
-      {/* Custom Styles */}
-      <style jsx>{`
-        .from-primary {
-          --tw-gradient-from: var(--primary);
-          --tw-gradient-to: rgb(0 153 255 / 0);
-          --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-        }
-        
-        .to-primary-bright {
-          --tw-gradient-to: var(--primary-bright);
-        }
-      `}</style>
-    </section>
-  );
-};
-
-export default TextListCards;

package/dist/components/UnderConstruction.jsx

@@ -1,76 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Hammer, Sparkles } from 'lucide-react';
-
-export default function UnderConstruction() {
-  const [dots, setDots] = useState('');
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setDots(prev => prev.length >= 3 ? '' : prev + '.');
-    }, 500);
-    return () => clearInterval(interval);
-  }, []);
-
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50 flex items-center justify-center p-4" dir="rtl">
-      <div className="max-w-2xl w-full text-center">
-        {/* Animated Icon */}
-        <div className="mb-8 flex justify-center">
-          <div className="relative">
-            <div className="absolute inset-0 bg-blue-400 rounded-full blur-xl opacity-30 animate-pulse"></div>
-            <div className="relative bg-white rounded-full p-6 shadow-2xl">
-              <Hammer className="w-16 h-16 text-blue-600 animate-bounce" />
-            </div>
-          </div>
-        </div>
-
-        {/* Main Heading */}
-        <h1 className="text-4xl md:text-6xl font-bold text-gray-800 mb-4">
-          האתר בבניה
-        </h1>
-
-        {/* Subheading with animated dots */}
-        <div className="flex items-center justify-center gap-2 mb-8">
-          <Sparkles className="w-5 h-5 text-purple-600" />
-          <p className="text-xl md:text-2xl text-gray-600">
-            עדכונים בקרוב{dots}
-          </p>
-          <Sparkles className="w-5 h-5 text-purple-600" />
-        </div>
-
-        {/* Description */}
-        <p className="text-lg text-gray-600 mb-12 max-w-lg mx-auto leading-relaxed">
-          אנחנו עובדים קשה כדי להביא לכם חוויה מדהימה. תודה על הסבלנות!
-        </p>
-
-        {/* Progress Bar */}
-        <div className="max-w-md mx-auto mb-12">
-          <div className="h-3 bg-gray-200 rounded-full overflow-hidden">
-            <div className="h-full bg-gradient-to-r from-blue-500 to-purple-600 rounded-full animate-pulse" style={{ width: '65%' }}></div>
-          </div>
-          <p className="text-sm text-gray-500 mt-2">בתהליך פיתוח...</p>
-        </div>
-
-        {/* Social Links or Contact (Optional) */}
-        <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
-          <div className="bg-white px-6 py-3 rounded-lg shadow-md border border-gray-200">
-            <p className="text-gray-600">
-              <span className="font-semibold">נשמח לעדכן אתכם!</span>
-            </p>
-          </div>
-        </div>
-
-        {/* Decorative Elements */}
-        <div className="mt-16 flex justify-center gap-2">
-          {[1, 2, 3, 4, 5].map((i) => (
-            <div
-              key={i}
-              className="w-2 h-2 bg-blue-400 rounded-full animate-bounce"
-              style={{ animationDelay: `${i * 0.1}s` }}
-            ></div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}

package/dist/components/VideoCard.jsx

@@ -1,88 +0,0 @@
-import React, { useRef, useState } from 'react';
-import { Play, RotateCcw } from 'lucide-react';
-import { motion } from 'framer-motion';
-
-export default function VideoCard({ videoUrl, title, description, index }) {
-    const videoRef = useRef(null);
-    const [isPlaying, setIsPlaying] = useState(false);
-    const [showControls, setShowControls] = useState(false);
-
-    const handleVideoClick = () => {
-        if (videoRef.current) {
-            videoRef.current.currentTime = 0;
-            videoRef.current.muted = false;
-            videoRef.current.play();
-            setIsPlaying(true);
-        }
-    };
-
-    const handleVideoEnd = () => {
-        setIsPlaying(false);
-    };
-
-    return (
-        <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.6, delay: index * 0.1 }}
-            className="group relative bg-white rounded-3xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-500 border border-purple-100 rounded-lg"
-            onMouseEnter={() => setShowControls(true)}
-            onMouseLeave={() => setShowControls(false)}
-        >
-            {/* Video Container */}
-            <div className="relative w-full aspect-video overflow-hidden">
-                <video
-                    ref={videoRef}
-                    autoPlay
-                    muted
-                    loop
-                    playsInline
-                    onEnded={handleVideoEnd}
-                    className="w-full h-full object-cover cursor-pointer transition-transform duration-300 group-hover:scale-105"
-                    onClick={handleVideoClick}
-                >
-                    <source src={videoUrl} type="video/mp4" />
-                    <div className="absolute inset-0 bg-gradient-to-br from-purple-500 to-green-500 flex items-center justify-center">
-                        <Play className="w-16 h-16 text-white opacity-70" />
-                    </div>
-                </video>
-
-                {/* Overlay Controls */}
-                <motion.div
-                    initial={{ opacity: 0 }}
-                    animate={{ opacity: showControls ? 1 : 0 }}
-                    className="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center transition-all duration-300"
-                >
-                    <motion.button
-                        whileHover={{ scale: 1.1 }}
-                        whileTap={{ scale: 0.95 }}
-                        onClick={handleVideoClick}
-                        className="bg-white bg-opacity-90 backdrop-blur-sm rounded-full p-4 shadow-lg hover:bg-white transition-all duration-300"
-                    >
-                        <RotateCcw className="w-6 h-6 text-purple-700" />
-                    </motion.button>
-                </motion.div>
-
-                {/* Playing Indicator */}
-                {isPlaying && (
-                    <div className="absolute top-4 right-4 bg-green-500 text-white px-3 py-1 rounded-full text-sm font-medium shadow-lg">
-                        Playing
-                    </div>
-                )}
-            </div>
-
-            {/* Content */}
-            <div className="p-6">
-                <h3 className="text-xl font-bold text-gray-900 mb-3 leading-tight">
-                    {title}
-                </h3>
-                <p className="text-gray-600 leading-relaxed text-sm">
-                    {description}
-                </p>
-            </div>
-
-            {/* Gradient Border Effect */}
-            <div className="absolute inset-0 rounded-3xl bg-gradient-to-r from-purple-500 to-green-500 opacity-0 group-hover:opacity-20 transition-opacity duration-300 pointer-events-none" />
-        </motion.div>
-    );
-}