x

apps/spa/src/components/DynamicProductCarousel.tsx

@@ -1,5 +1,4 @@
 import ProductCard from './ProductCard';
-import ProductSwatchCard from './ProductSwatchCard';
 import { useRef } from 'react';
 import { ChevronLeft, ChevronRight, ArrowRight } from 'lucide-react';
 import { useTranslation } from 'react-i18next';

apps/spa/src/components/ProductCard.tsx

@@ -1,5 +1,5 @@
 import { useNavigate } from 'react-router-dom';
-import { useState, useMemo } from 'react';
+import { useMemo } from 'react';
 import type { Product, Variant, TranslatableString } from '../types';
 import { getCategoryImage, formatPrice } from '../types';
 import { Heart, ShoppingBag, Layers } from 'lucide-react';
@@ -53,7 +53,7 @@ export default function ProductCard({
   const { addToCart } = useCartStore();
   const { i18n, t } = useTranslation();
   const isWished = isInWishlist(product.id);
-  const [selectedVariant, setSelectedVariant] = useState(product.variants?.[0] || null);
+  const selectedVariant = product.variants?.[0] || null;
 
   // Extract unique color swatches from variants
   const colorSwatches = useMemo(() => {

apps/spa/src/components/ProductSwatchCard.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo } from 'react';
+import { useMemo } from 'react';
 import { Link } from 'react-router-dom';
 import type { Product, Variant, TranslatableString } from '../types';
 import { formatPrice } from '../types';
@@ -36,9 +36,9 @@ export default function ProductSwatchCard({ product, badgeText }: ProductSwatchC
   }, [product.variants]);
 
   // Active selected variant
-  const [activeVariant, setActiveVariant] = useState<Variant | null>(() => {
+  const activeVariant = useMemo<Variant | null>(() => {
     return colorSwatches[0]?.variant || product.variants?.[0] || null;
-  });
+  }, [colorSwatches, product.variants]);
 
   // Display Image: variant image if available, else first product image
   const displayImageUrl = useMemo(() => {