From ce4502d1233e8e25c97f2d56303dbeae15e0da77 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Tue, 6 Oct 2026 18:16:25 +0700
Subject: [PATCH] x

---
 apps/spa/src/components/ProductCard.tsx     | 37 +++++----------------
 apps/website/src/components/ProductCard.tsx | 35 +++++--------------
 2 files changed, 17 insertions(+), 55 deletions(-)

diff --git a/apps/spa/src/components/ProductCard.tsx b/apps/spa/src/components/ProductCard.tsx
index 6847b85..b87c022 100644
--- a/apps/spa/src/components/ProductCard.tsx
+++ b/apps/spa/src/components/ProductCard.tsx
@@ -150,34 +150,15 @@ export default function ProductCard({ product, enableQuickShop = false, category
 
         {colorSwatches.length > 0 || (enableQuickShop && product.variants && product.variants.length > 1) ? (
           colorSwatches.length > 0 ? (
-            <div className="mb-1 mt-2 flex items-center gap-1.5 flex-wrap" onClick={(e) => e.stopPropagation()}>
-              {colorSwatches.slice(0, 5).map(({ colorCode, variant, label }) => {
-                const isSelected = selectedVariant?.id === variant.id || selectedVariant?.colorCode === colorCode;
-                return (
-                  <button
-                    key={variant.id || colorCode}
-                    type="button"
-                    onClick={(e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      setSelectedVariant(variant);
-                    }}
-                    onMouseEnter={() => {
-                      if (variant.imageUrl) {
-                        setSelectedVariant(variant);
-                      }
-                    }}
-                    className={`relative h-4 w-4 rounded-full border border-black/15 transition-all duration-200 hover:scale-125 focus:outline-none ${
-                      isSelected
-                        ? 'ring-2 ring-pop-black ring-offset-2 scale-110 shadow-sm'
-                        : 'opacity-85 hover:opacity-100'
-                    }`}
-                    style={{ backgroundColor: colorCode }}
-                    title={label || colorCode}
-                    aria-label={label || `Color ${colorCode}`}
-                  />
-                );
-              })}
+            <div className="mb-1 mt-2 flex items-center gap-1.5 flex-wrap">
+              {colorSwatches.slice(0, 5).map(({ colorCode, variant, label }) => (
+                <span
+                  key={variant.id || colorCode}
+                  className="relative h-3.5 w-3.5 rounded-full border border-black/15 shadow-sm shrink-0"
+                  style={{ backgroundColor: colorCode }}
+                  title={label || colorCode}
+                />
+              ))}
               {colorSwatches.length > 5 && (
                 <span className="text-[10px] font-semibold text-pop-black/60 pl-0.5">
                   +{colorSwatches.length - 5}
diff --git a/apps/website/src/components/ProductCard.tsx b/apps/website/src/components/ProductCard.tsx
index e214261..33f2be5 100644
--- a/apps/website/src/components/ProductCard.tsx
+++ b/apps/website/src/components/ProductCard.tsx
@@ -145,33 +145,14 @@ export default function ProductCard({ product }: ProductCardProps) {
         {colorSwatches.length > 0 || (product.variants && product.variants.length > 1) ? (
           colorSwatches.length > 0 ? (
             <div className="mb-1 mt-2 flex items-center gap-1.5 flex-wrap">
-              {colorSwatches.slice(0, 5).map(({ colorCode, variant, label }) => {
-                const isSelected = selectedVariant?.id === variant.id || selectedVariant?.colorCode === colorCode
-                return (
-                  <button
-                    key={variant.id || colorCode}
-                    type="button"
-                    onClick={(e) => {
-                      e.preventDefault()
-                      e.stopPropagation()
-                      setSelectedVariant(variant)
-                    }}
-                    onMouseEnter={() => {
-                      if (variant.imageUrl) {
-                        setSelectedVariant(variant)
-                      }
-                    }}
-                    className={`relative h-4 w-4 rounded-full border border-black/15 dark:border-white/20 transition-all duration-200 hover:scale-125 focus:outline-none ${
-                      isSelected
-                        ? 'ring-2 ring-text-main ring-offset-2 ring-offset-surface-card scale-110 shadow-sm'
-                        : 'opacity-85 hover:opacity-100'
-                    }`}
-                    style={{ backgroundColor: colorCode }}
-                    title={label || colorCode}
-                    aria-label={label || `Color ${colorCode}`}
-                  />
-                )
-              })}
+              {colorSwatches.slice(0, 5).map(({ colorCode, variant, label }) => (
+                <span
+                  key={variant.id || colorCode}
+                  className="relative h-3.5 w-3.5 rounded-full border border-black/15 dark:border-white/20 shadow-sm shrink-0"
+                  style={{ backgroundColor: colorCode }}
+                  title={label || colorCode}
+                />
+              ))}
               {colorSwatches.length > 5 && (
                 <span className="text-[10px] font-semibold text-muted-text pl-0.5">
                   +{colorSwatches.length - 5}