added line through style

frontend/components/product/ProductHero.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-
 // import
 
 import useGetProduct from "~/composables/api/product/useGetProduct";
@@ -21,7 +20,9 @@ const selectedColor = ref(product.value!.colors[0]);
 
 // provide / inject
 
-const { selectedVariant, changeSelectedVariant } = inject("productVariant") as ProductVariantProvideType;
+const { selectedVariant, changeSelectedVariant } = inject(
+    "productVariant"
+) as ProductVariantProvideType;
 
 // computed
 
@@ -31,24 +32,37 @@ const sanitizedProductDescription = computed(() => {
 
 // watch
 
-watch(() => selectedVariantId.value, (newId) => {
-    const newVariant = product.value!.variants.find(variant => variant.id === newId)!;
-    changeSelectedVariant(newVariant);
-});
+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
-});
-
-watch(() => selectedVariant.value, (newValue) => {
-    selectedQuantity.value = 1;
-    selectedSlide.value = newValue.images[0].id;
-});
+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,
+    }
+);
 
+watch(
+    () => selectedVariant.value,
+    (newValue) => {
+        selectedQuantity.value = 1;
+        selectedSlide.value = newValue.images[0].id;
+    }
+);
 </script>
 
 <template>
@@ -60,25 +74,30 @@ watch(() => selectedVariant.value, (newValue) => {
         />
         <div class="flex-1 flex flex-col gap-3 mt-12">
             <span class="typo-label-sm"> سامسونگ </span>
-            <h1 class="typo-h-2"> {{ product!.name }} </h1>
+            <h1 class="typo-h-2">{{ product!.name }}</h1>
             <div class="flex w-full items-center justify-between h-[85px]">
                 <div class="flex items-end gap-4">
                     <div class="flex flex-col gap-2">
                         <span
                             v-if="selectedVariant.discount > 0"
-                            class="typo-p-lg relative flex-center w-fit"
-                            :class="'after:w-full after:h-[2px] after:bg-black after:absolute'"
+                            class="typo-p-lg relative flex-center w-fit line-through"
                         >
                             {{ selectedVariant.price }}
                         </span>
                         <span
                             class="typo-p-2xl relative flex-center w-fit font-medium"
                         >
-                            {{ selectedVariant.discount > 0 ? selectedVariant.price : selectedVariant.price }}
+                            {{
+                                selectedVariant.discount > 0
+                                    ? selectedVariant.price
+                                    : selectedVariant.price
+                            }}
                         </span>
                     </div>
-                    <div v-if="selectedVariant.discount > 0"
-                         class="text-white bg-blue-500 mb-1 px-4 py-2 text-xs rounded-full flex items-center gap-1">
+                    <div
+                        v-if="selectedVariant.discount > 0"
+                        class="text-white bg-blue-500 mb-1 px-4 py-2 text-xs rounded-full flex items-center gap-1"
+                    >
                         <Icon name="material-symbols:percent" class="size-4" />
                         {{ selectedVariant.discount }}
                         درصد تخفیف
@@ -93,17 +112,15 @@ watch(() => selectedVariant.value, (newValue) => {
             />
 
             <div class="flex items-center gap-4">
-                <span class="typo-p-lg">
-                    تنوع رنگی :
-                </span>
+                <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"
                         selectable
-                        :selected="selectedColor === color "
-                        :style="{backgroundColor: color}"
+                        :selected="selectedColor === color"
+                        :style="{ backgroundColor: color }"
                         class="cursor-pointer"
                     />
                 </div>
@@ -111,7 +128,11 @@ watch(() => selectedVariant.value, (newValue) => {
 
             <div class="flex items-center gap-6 flex-wrap">
                 <ProductVariant
-                    @click="variant.in_stock > 0 ? selectedVariantId = variant.id : undefined"
+                    @click="
+                        variant.in_stock > 0
+                            ? (selectedVariantId = variant.id)
+                            : undefined
+                    "
                     v-for="variant in product!.variants.filter(p => p.color === selectedColor)"
                     :key="variant.id"
                     :variantDetail="variant"
@@ -120,7 +141,6 @@ watch(() => selectedVariant.value, (newValue) => {
             </div>
 
             <div class="w-full flex flex-col gap-6 mt-10">
-
                 <RemainQuantity
                     :maxQuantity="selectedVariant.in_stock"
                     :quantity="selectedQuantity"