x

apps/website/src/components/ProductSwatchCard.tsx

@@ -91,34 +91,22 @@ export default function ProductSwatchCard({ product, badgeText }: ProductSwatchC
           {formatPrice(displayPrice)}
         </div>
 
-        {/* Color Swatch Dots */}
+        {/* Color Swatch Dots (Display Only) */}
         {colorSwatches.length > 0 && (
-          <div className="flex items-center gap-1.5 pt-1">
-            {colorSwatches.map(({ colorCode, variant }) => {
-              const isActive = activeVariant?.colorCode === colorCode
-              return (
-                <button
-                  key={colorCode}
-                  type="button"
-                  onClick={(e) => {
-                    e.preventDefault()
-                    e.stopPropagation()
-                    setActiveVariant(variant)
-                  }}
-                  onMouseEnter={() => {
-                    if (variant.imageUrl) {
-                      setActiveVariant(variant)
-                    }
-                  }}
-                  className={`relative w-3.5 h-3.5 rounded-full border border-black/15 dark:border-white/20 transition-all duration-200 hover:scale-125 focus:outline-none ${
-                    isActive ? 'ring-2 ring-neutral-700 dark:ring-neutral-300 ring-offset-1 scale-110' : 'opacity-85 hover:opacity-100'
-                  }`}
-                  style={{ backgroundColor: colorCode }}
-                  title={variant.option1 || variant.option2 || colorCode}
-                  aria-label={`Color ${colorCode}`}
-                />
-              )
-            })}
+          <div className="flex items-center gap-1.5 pt-1 flex-wrap">
+            {colorSwatches.slice(0, 5).map(({ colorCode, variant }) => (
+              <span
+                key={colorCode}
+                className="relative w-3.5 h-3.5 rounded-full border border-black/15 dark:border-white/20 shadow-sm shrink-0"
+                style={{ backgroundColor: colorCode }}
+                title={variant.option1 || variant.option2 || colorCode}
+              />
+            ))}
+            {colorSwatches.length > 5 && (
+              <span className="text-[10px] font-semibold text-neutral-500 dark:text-neutral-400 pl-0.5">
+                +{colorSwatches.length - 5}
+              </span>
+            )}
           </div>
         )}
       </div>