@codesinger0/shared-components 1.1.83 → 1.1.85

package/dist/components 2/TextListCards.jsx

@@ -0,0 +1,107 @@
+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 px-8">
+                {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 2/ToastProvider.jsx

@@ -0,0 +1,38 @@
+// components/ToastProvider.jsx
+import { createContext, useContext, useState, useCallback } from 'react';
+import Toast from './elements/Toast';
+
+const ToastContext = createContext();
+
+export const useToast = () => useContext(ToastContext);
+
+export const ToastProvider = ({ children }) => {
+  const [toasts, setToasts] = useState([]);
+
+  const addToast = useCallback((message, variant, duration) => {
+    const id = Date.now();
+    setToasts((prev) => [...prev, { id, message, duration, variant }]);
+  }, []);
+
+  const removeToast = useCallback((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  return (
+    <ToastContext.Provider value={addToast}>
+      {children}
+      <div className="fixed bottom-5 left-0 right-0 flex flex-col items-center space-y-2 z-50">
+        {toasts.map((toast) => (
+          <Toast
+            key={toast.id}
+            id={toast.id}
+            message={toast.message}
+            duration={toast.duration}
+            variant={toast.variant}
+            onClose={removeToast}
+          />
+        ))}
+      </div>
+    </ToastContext.Provider>
+  );
+};

package/dist/components 2/UnderConstruction.jsx

@@ -0,0 +1,76 @@
+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 2/VideoCard.jsx

@@ -0,0 +1,88 @@
+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>
+    );
+}

package/dist/components 2/cart/CartItem.jsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { X, Plus, Minus } from 'lucide-react';
+
+const CartItem = ({ item, onUpdateQuantity, onRemoveItem }) => {
+  const handleQuantityChange = (newQuantity) => {
+    if (newQuantity <= 0) {
+      onRemoveItem(item.id);
+    } else {
+      onUpdateQuantity(item.id, newQuantity);
+    }
+  };
+
+  const itemTotal = (item.price * item.quantity).toFixed(2);
+
+  return (
+    <motion.div
+      layout
+      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="glass-card p-4 mb-3"
+      dir="rtl"
+    >
+      <div className="flex items-start gap-3">
+        {/* Product Image */}
+        <div className="w-16 h-16 rounded-lg overflow-hidden bg-gray-100 flex-shrink-0">
+          {item.imageUrl ? (
+            <img
+              src={item.imageUrl}
+              alt={item.name}
+              className="w-full h-full object-cover"
+              onError={(e) => {
+                e.target.style.display = 'none';
+                e.target.nextElementSibling.style.display = 'flex';
+              }}
+            />
+          ) : null}
+          <div
+            className="w-full h-full flex items-center justify-center content-text text-xs"
+            style={{ display: item.imageUrl ? 'none' : 'flex' }}
+          >
+            🍰
+          </div>
+        </div>
+
+        {/* Product Info */}
+        <div className="flex-1">
+          <div className="flex justify-between items-start mb-2">
+            <div>
+              <h3 className="content-text font-medium line-clamp-2">{item.name}</h3>
+              <p className="text-sm text-price">₪{item.price} ליחידה</p>
+            </div>
+            
+            {/* Remove Button */}
+            <button
+              onClick={() => onRemoveItem(item.id)}
+              className="text-red-500 hover:bg-red-50 p-1 rounded-md transition-colors duration-200"
+              title="הסר מהעגלה"
+            >
+              <X size={16} />
+            </button>
+          </div>
+
+          {/* Quantity Controls and Total */}
+          <div className="flex justify-between items-center">
+            {/* Quantity Controls */}
+            <div className="flex items-center gap-2">
+              <button
+                onClick={() => handleQuantityChange(item.quantity - 1)}
+                disabled={item.quantity <= 1}
+                className="bg-gray-200 hover:bg-gray-300 disabled:opacity-50 disabled:cursor-not-allowed w-7 h-7 rounded-md flex items-center justify-center transition-colors duration-200"
+              >
+                <Minus size={14} />
+              </button>
+              
+              <span className="w-8 text-center content-text font-medium">
+                {item.quantity}
+              </span>
+              
+              <button
+                onClick={() => handleQuantityChange(item.quantity + 1)}
+                className="bg-gray-200 hover:bg-gray-300 w-7 h-7 rounded-md flex items-center justify-center transition-colors duration-200"
+              >
+                <Plus size={14} />
+              </button>
+            </div>
+
+            {/* Item Total */}
+            <div className="content-text font-bold text-price">
+              ₪{itemTotal}
+            </div>
+          </div>
+        </div>
+      </div>
+    </motion.div>
+  );
+};
+
+export default CartItem;

package/dist/components 2/cart/FloatingCartButton.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { ShoppingCart } from 'lucide-react';
+import { useCart } from '../../context/CartContext';
+
+const FloatingCartButton = ({
+  absolute = true,
+  icon: CustomIcon = ShoppingCart,
+  bgColor = 'bg-orange-500',
+  hoverColor = 'hover:brightness-90'
+}) => {
+  const { totalItems, toggleCart } = useCart();
+
+  return (
+    <div className={`${absolute ? 'fixed bottom-6 right-6' : 'relative'} z-30`}>
+      <motion.button
+        onClick={toggleCart}
+        className={`relative ${bgColor} text-white p-4 rounded-full shadow-lg ${hoverColor} transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50`}
+        style={{
+          transform: 'translate3d(0, 0, 0)',
+          WebkitTransform: 'translate3d(0, 0, 0)',
+          WebkitBackfaceVisibility: 'hidden'
+        }} whileHover={{ scale: 1.05 }}
+        whileTap={{ scale: 0.95 }}
+        initial={{ scale: 0 }}
+        animate={{ scale: 1 }}
+        transition={{ type: "spring", stiffness: 300, damping: 25 }}
+      >
+        <CustomIcon size={26} />
+        {/* Badge */}
+        <AnimatePresence>
+          {totalItems > 0 && (
+            <motion.div
+              initial={{ scale: 0, opacity: 0 }}
+              animate={{ scale: 1, opacity: 1 }}
+              exit={{ scale: 0, opacity: 0 }}
+              transition={{ type: "spring", stiffness: 400, damping: 25 }}
+              className="absolute -top-2 -right-2 bg-red-500 text-white text-xs font-bold rounded-full min-w-[1.5rem] h-6 flex items-center justify-center px-1"
+            >
+              {totalItems > 99 ? '99+' : totalItems}
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </motion.button>
+    </div>
+  );
+};
+
+export default FloatingCartButton;