Updated

frontend/components/product/ProductHero.vue

@@ -17,6 +17,8 @@ const selectedVariantId = ref(product.value!.variants[0].id);
 const selectedQuantity = ref(1);
 const selectedSlide = ref(product.value!.variants[0].images[0].id);
 
+const selectedColor = ref(product.value!.colors[0]);
+
 // provide / inject
 
 const { selectedVariant, changeSelectedVariant } = inject("productVariant") as ProductVariantProvideType;
@@ -32,6 +34,12 @@ const sanitizedProductDescription = computed(() => {
 watch(() => selectedVariantId.value, (newId) => {
     const newVariant = product.value!.variants.find(variant => variant.id === newId)!;
     changeSelectedVariant(newVariant);
+});
+
+watch(() => selectedColor.value, (newValue) => {
+    const filteredVariants = product.value!.variants.filter(v => v.color === newValue);
+    selectedVariantId.value = filteredVariants[0].id;
+    selectedVariant.value = filteredVariants[0];
 }, {
     immediate: true
 });
@@ -84,10 +92,26 @@ watch(() => selectedVariant.value, (newValue) => {
                 v-html="sanitizedProductDescription"
             />
 
+            <div class="flex items-center gap-4">
+                <span class="typo-p-lg">
+                    تنوع رنگی :
+                </span>
+                <div class="flex items-center gap-4 py-4">
+                    <ColorCircle
+                        v-for="color in product!.colors"
+                        :key="color"
+                        @click="selectedColor = color"
+                        :selected="selectedColor === color "
+                        :style="{backgroundColor: color}"
+                        class="cursor-pointer"
+                    />
+                </div>
+            </div>
+
             <div class="flex items-center gap-6 flex-wrap">
                 <ProductVariant
                     @click="variant.in_stock > 0 ? selectedVariantId = variant.id : undefined"
-                    v-for="variant in product!.variants"
+                    v-for="variant in product!.variants.filter(p => p.color === selectedColor)"
                     :key="variant.id"
                     :variantDetail="variant"
                     :isSelected="selectedVariantId === variant.id"