@codesinger0/shared-components 1.1.83 → 1.1.85

package/dist/components 2/QAAccordion.jsx

@@ -0,0 +1,212 @@
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+const QAAccordion = ({
+  title = "שאלות נפוצות",
+  subtitle = "מענה לשאלות הנפוצות ביותר",
+  qaItems = [],
+  onClickCta = () => { },
+  showCTA = true,
+  className = "",
+  backgroundColor = "bg-main",
+  cardBackgroundColor = "bg-white",
+  textColor = "text-gray-800",
+  answerTextColor = "text-gray-700"
+}) => {
+  const [openIndex, setOpenIndex] = useState(null);
+
+  const toggleAccordion = (index) => {
+    setOpenIndex(openIndex === index ? null : index);
+  };
+
+  // Default Q&A items for demo
+  const defaultQAItems = [
+    {
+      question: "מהי טרופיקל ג’אר ומה הסיפור שמאחוריה?",
+      answer: "טרופיקל ג’אר היא מותג של רטבים מותססים טבעיים בעבודת יד, שנולדה מתוך אהבה לתסיסה, לטעמים טרופיים ולבריאות. אנו משלבים מסורת קולינרית עם יצירתיות מודרנית, כדי להביא לשולחן שלכם משהו חדש ומרגש."
+    },
+    {
+      question: "מה זה רוטב מותסס?",
+      answer: "רוטב מותסס הוא רוטב שעובר תהליך טבעי שבו מיקרואורגניזמים ידידותיים מפרקים את הסוכרים בירקות ובפירות. התוצאה היא עומק טעמים ייחודי, עיכול קל יותר ויתרונות בריאותיים — בלי חומרים משמרים."
+    },
+    {
+      question: "מה המרכיבים ברטבים שלכם?",
+      answer: "כל רוטב מיוצר מירקות ופירות טריים, תבלינים איכותיים, מלח ים ומים. בלי חומרים מלאכותיים, בלי צבעי מאכל ובלי קיצורי דרך — רק חומרי גלם טבעיים שמביאים לידי ביטוי את הטבע."
+    },
+    {
+      question: "איך הכי מומלץ להשתמש ברטבים?",
+      answer: "הרטבים שלנו מתאימים כמעט לכל דבר: כתוספת לסלטים, כמטבל לירקות, לשדרוג סנדוויצ'ים, כתיבול לבשרים ולדגים, או אפילו כתיבול עדין לאורז ופסטה. הם מוסיפים נגיעה טרופית ובריאה לכל מנה."
+    },
+    {
+      question: "איך לשמור את הרטבים אחרי פתיחה?",
+      answer: "לאחר פתיחה יש לשמור במקרר ולוודא שהצנצנת סגורה היטב. התסיסה ממשיכה גם אחרי הפתיחה, לכן ייתכנו שינויים קלים בטעם או בבועות טבעיות — זה חלק מהקסם!"
+    },
+    {
+      question: "האם הרטבים מתאימים לטבעונים?",
+      answer: "כן, כל הרטבים שלנו 100% טבעוניים וצמחיים. הם מיוצרים ללא מוצרים מן החי ומתאימים לכל מי שמחפש תיבול אותנטי, טבעי ובריא."
+    },
+    {
+      question: "האם הרטבים חריפים?",
+      answer: "הסדרה שלנו כוללת גם רטבים עדינים וגם רטבים חריפים יותר. בכל מוצר מצוין רמת החריפות כדי שתוכלו לבחור את מה שהכי מתאים לטעם האישי שלכם."
+    },
+    {
+      question: "האם אפשר להזמין משלוחים?",
+      answer: "כן! אנו מבצעים משלוחים לכל הארץ. ניתן לבחור משלוח עד הבית או נקודת איסוף, והזמנה מגיעה לרוב תוך 3–5 ימי עסקים."
+    },
+    {
+      question: "האם אפשר לרכוש בחנויות פיזיות?",
+      answer: "נכון לעכשיו, הרטבים זמינים בעיקר כאן באתר. בהמשך נוסיף נקודות מכירה נבחרות ונעדכן באתר וברשתות החברתיות."
+    },
+    {
+      question: "כמה זמן מחזיקים הרטבים?",
+      answer: "בזכות התסיסה הטבעית, חיי המדף ארוכים יותר מרטבים רגילים. כל צנצנת מגיעה עם תאריך עדיף להשתמש עד, ולאחר פתיחה מומלץ לצרוך תוך מספר שבועות."
+    },
+    {
+      question: "מה היתרונות הבריאותיים של רטבים מותססים?",
+      answer: "התסיסה מייצרת חיידקים פרוביוטיים טובים ותורמת לעיכול בריא. בנוסף, היא מעצימה את הטעמים באופן טבעי ומפחיתה צורך בתוספים מלאכותיים."
+    },
+    {
+      question: "איך אני יודע איזה רוטב לבחור?",
+      answer: "אם אתם אוהבים טעמים עדינים – התחילו ברטבים הפירותיים והמתונים. אם אתם חובבי חריף – נסו את הגרסאות החריפות יותר. תמיד כדאי להתחיל מצנצנת אחת ולגלות את הסגנון האהוב עליכם."
+    }
+  ];
+
+  const items = qaItems.length > 0 ? qaItems : defaultQAItems;
+
+  return (
+    <section className={`py-16 px-4 ${backgroundColor} ${className}`} dir="rtl">
+      <div className="max-w-4xl mx-auto">
+        {/* Header */}
+        <div className="text-center mb-12">
+          <h2 className="title mb-4">{title}</h2>
+          <p className="subtitle">{subtitle}</p>
+        </div>
+
+        {/* Accordion */}
+        <div className="space-y-4">
+          {items.map((item, index) => (
+            <div
+              key={index}
+              className={`${cardBackgroundColor} rounded-xl shadow-sm border border-gray-100 overflow-hidden`}
+            >
+              {/* Question Header */}
+              <button
+                onClick={() => toggleAccordion(index)}
+                className="w-full px-6 py-5 text-right flex items-center justify-between hover:bg-gray-50 transition-colors duration-200 focus:outline-none"
+                style={{
+                  '--tw-ring-color': 'color-mix(in srgb, var(--primary) 20%, transparent)'
+                }}
+                onFocus={(e) => e.currentTarget.style.boxShadow = '0 0 0 2px var(--tw-ring-color)'}
+                onBlur={(e) => e.currentTarget.style.boxShadow = ''}
+              >
+                <span className={`subtitle font-semibold ${textColor} flex-1`}>
+                  {item.question}
+                </span>
+
+                {/* Animated Arrow */}
+                <motion.div
+                  animate={{ rotate: openIndex === index ? 180 : 0 }}
+                  transition={{
+                    type: "spring",
+                    stiffness: 300,
+                    damping: 25
+                  }}
+                  className="mr-4 flex-shrink-0"
+                >
+                  <svg
+                    className="w-5 h-5 text-primary"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M19 9l-7 7-7-7"
+                    />
+                  </svg>
+                </motion.div>
+              </button>
+
+              {/* Answer Content with Animation */}
+              <AnimatePresence initial={false}>
+                {openIndex === index && (
+                  <motion.div
+                    initial={{ height: 0, opacity: 0 }}
+                    animate={{
+                      height: "auto",
+                      opacity: 1,
+                      transition: {
+                        height: {
+                          type: "spring",
+                          stiffness: 300,
+                          damping: 30,
+                          mass: 0.8
+                        },
+                        opacity: {
+                          duration: 0.25,
+                          delay: 0.1
+                        }
+                      }
+                    }}
+                    exit={{
+                      height: 0,
+                      opacity: 0,
+                      transition: {
+                        height: {
+                          type: "spring",
+                          stiffness: 300,
+                          damping: 30,
+                          mass: 0.8
+                        },
+                        opacity: {
+                          duration: 0.15
+                        }
+                      }
+                    }}
+                    className="overflow-hidden"
+                  >
+                    <div className="px-6 pb-5 border-t border-gray-100">
+                      <motion.p
+                        initial={{ y: -10, opacity: 0 }}
+                        animate={{
+                          y: 0,
+                          opacity: 1,
+                          transition: {
+                            type: "spring",
+                            stiffness: 300,
+                            damping: 25,
+                            delay: 0.1
+                          }
+                        }}
+                        className={`content-text ${answerTextColor} leading-relaxed pt-4`}
+                        style={{ whiteSpace: 'pre-line' }}
+                      >
+                        {item.answer}
+                      </motion.p>
+                    </div>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </div>
+          ))}
+        </div>
+
+        {/* Optional CTA */}
+        {showCTA && (
+          <div className="text-center mt-12">
+            <p className="content-text mb-4">
+              לא מצאתם את התשובה שחיפשתם?
+            </p>
+            <button className="btn-primary" onClick={onClickCta}>
+              צרו קשר
+            </button>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default QAAccordion;

package/dist/components 2/SmallItemCard.jsx

@@ -0,0 +1,152 @@
+
+import React from 'react';
+import { ShoppingCart } from 'lucide-react';
+import SmallButton from './elements/SmallButton';
+
+const SmallItemCard = ({
+  imageUrl,
+  label,
+  description,
+  price,
+  discountPrice,
+  amountAvailable,
+  availableLabel = 'נותרו במלאי',
+  soldOutLabel = 'אזל במלאי',
+  className = '',
+  onClick,
+  onAddToCart,
+  ...props
+}) => {
+  // Calculate discount percentage
+  const hasDiscount = discountPrice && discountPrice < price;
+  const discountPercentage = hasDiscount
+    ? Math.round(((price - discountPrice) / price) * 100)
+    : 0;
+
+  const handleAddToCartClick = (event) => {
+    event.stopPropagation();
+    onAddToCart()
+  }
+
+  const handleCardClickWrapper = (event) => {
+    if (amountAvailable !== undefined && amountAvailable <= 0) {
+      return
+    }
+    onClick(event)
+  }
+
+  return (
+    <div
+      className={`glass-card cursor-pointer transition-all duration-300 hover:scale-104 flex flex-col ${className}`}
+      onClick={handleCardClickWrapper}
+      dir="rtl"
+      {...props}
+    >
+      {/* Image Container */}
+      <div className="relative w-full h-40 overflow-hidden rounded-t-xl">
+        {imageUrl ? (
+          <img
+            src={imageUrl}
+            alt={label}
+            className="w-full h-full object-cover transition-transform duration-300 hover:scale-110"
+            onError={(e) => {
+              e.target.style.display = 'none';
+              e.target.nextElementSibling.style.display = 'flex';
+            }}
+          />
+        ) : null}
+
+        {/* Fallback for missing image */}
+        <div
+          className="w-full h-full bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center"
+          style={{ display: imageUrl ? 'none' : 'flex' }}
+        >
+          <div className="text-center text-gray-400">
+            <div className="text-2xl mb-1">🍰</div>
+            <div className="text-xs font-medium">תמונה</div>
+          </div>
+        </div>
+
+        {/* Sold Out Badge - Centered */}
+        {amountAvailable !== undefined && amountAvailable <= 0 && (
+          <div className="absolute inset-0 flex items-center justify-center bg-black bg-opacity-40">
+            <div className="bg-red-500 text-white px-6 py-2 rounded-lg text-sm font-bold shadow-lg">
+              {soldOutLabel}
+            </div>
+          </div>
+        )}
+
+        {/* Discount Badge */}
+        {hasDiscount && (
+          <div className="absolute top-2 left-2 bg-red-500 text-white px-2 py-1 rounded-full text-xs font-bold shadow-lg">
+            -{discountPercentage}%
+          </div>
+        )}
+      </div>
+
+      {/* Content */}
+      <div className="p-4 flex flex-col flex-grow">
+        {/* Name */}
+        <h3 className="subtitle font-semibold line-clamp-2 flex-shrink-0">
+          {label}
+        </h3>
+
+        {/* Description */}
+        {description && (
+          <div className="flex-grow">
+            <p className="caption-text line-clamp-2 leading-relaxed">
+              {description}
+            </p>
+          </div>
+        )}
+
+        {/* Price Section */}
+        <div className="mb-3 flex-shrink-0 leading-relaxed">
+          {hasDiscount ? (
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <span className="price-tag text-green-600">
+                    ₪{discountPrice}
+                  </span>
+                  <span className="text-sm text-gray-400 line-through">
+                    ₪{price}
+                  </span>
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div className="flex items-center justify-between">
+              <span className="price-tag">
+                ₪{price}
+              </span>
+            </div>
+          )}
+        </div>
+
+        {/* Stock Availability */}
+        {amountAvailable !== undefined && amountAvailable > 0 && (
+          <div className="text-xs text-gray-600 font-medium mb-2">
+            {availableLabel}: {amountAvailable}
+          </div>
+        )}
+
+
+
+      </div>
+
+      <div className='mb-4 px-4'>
+        <SmallButton
+          onClick={handleAddToCartClick}
+          disabled={amountAvailable !== undefined && amountAvailable <= 0}
+          className="w-full flex items-center justify-center gap-2"
+        >
+          <ShoppingCart size={16} />
+          הוסף לעגלה
+        </SmallButton>
+      </div>
+    </div>
+  );
+};
+
+export default SmallItemCard;

package/dist/components 2/SmallItemsGrid.jsx

@@ -0,0 +1,313 @@
+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,
+    onItemClick,
+    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) => {
+        if (onItemClick) {
+            onItemClick(item);
+        } else {
+            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;