Updated

frontend/components/product/ProductHero.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-
 // import
 
 import useGetProduct from "~/composables/api/product/useGetProduct";
@@ -31,61 +30,78 @@ const { selectedVariant, changeSelectedVariant } = inject("productVariant") as P
 const addItemToCart = async () => {
     await addCartItem({
         id: selectedVariant.value!.id,
-        quantity: selectedQuantity.value
+        quantity: selectedQuantity.value,
     });
     await refetchProduct();
 };
 
 // watch
 
-watch(() => selectedVariantId.value, (newId) => {
+watch(
-    const newVariant = product.value!.variants.find(variant => variant.id === newId)!;
+    () => selectedVariantId.value,
-    changeSelectedVariant(newVariant);
+    (newId) => {
-});
+        const newVariant = product.value!.variants.find((variant) => variant.id === newId)!;
+        changeSelectedVariant(newVariant);
+    }
+);
 
-watch(() => selectedColor.value, (newValue) => {
+watch(
-    const filteredVariants = product.value!.variants.filter(v => v.color === newValue);
+    () => selectedColor.value,
-    selectedVariantId.value = filteredVariants[0].id;
+    (newValue) => {
-    selectedVariant.value = filteredVariants[0];
+        const filteredVariants = product.value!.variants.filter((v) => v.color === newValue);
-}, {
+        selectedVariantId.value = filteredVariants[0].id;
-    immediate: true
+        selectedVariant.value = filteredVariants[0];
-});
+    },
-
+    {
-watch(() => selectedVariant.value!, (newValue) => {
+        immediate: true,
-    selectedQuantity.value = 1;
+    }
-    selectedSlide.value = newValue.images[0].id;
+);
-});
 
+watch(
+    () => selectedVariant.value!,
+    (newValue) => {
+        selectedQuantity.value = 1;
+        selectedSlide.value = newValue.images[0].id;
+    }
+);
 </script>
 
 <template>
     <div class="flex max-lg:flex-col gap-12 xl:gap-16 container pt-[5rem] pb-28">
         <div class="flex flex-col gap-3 lg:hidden">
-            <NuxtLink to="#" class="typo-label-sm"> {{ product!.category.name }}</NuxtLink>
+            <NuxtLink
-            <h1 class="typo-h-6 xs:typo-h-5 sm:typo-h-4 lg:typo-h-2"> {{ product!.name }} </h1>
+                to="#"
+                class="typo-label-sm"
+            >
+                {{ product!.category.name }}</NuxtLink
+            >
+            <h1 class="typo-h-6 xs:typo-h-5 sm:typo-h-4 lg: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="typo-p-md sm:typo-p-lg relative flex-center w-fit"
                             :class="'after:w-full after:h-[2px] after:bg-black after:absolute'"
                         >
                             {{ selectedVariant!.price }}
                         </span>
-                        <span
+                        <span class="typo-p-md sm:typo-p-2xl relative flex-center w-fit font-medium">
-                            class="typo-p-2xl relative flex-center w-fit font-medium"
-                        >
                             {{ 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"
+                        class="text-white bg-blue-500 mb-1 px-3 sm:px-4 py-1.5 sm:py-2 text-xs rounded-full flex items-center gap-1"
                     >
-                        <Icon name="material-symbols:percent" class="size-4" />
+                        <Icon
+                            name="material-symbols:percent"
+                            class="size-3.5 sm:size-4"
+                        />
                         {{ selectedVariant!.discount }}
-                        درصد تخفیف
+                        <span class="max-sm:hidden"> تخفیف درصد </span>
                     </div>
                 </div>
                 <Rating :rate="3" />
@@ -103,7 +119,9 @@ watch(() => selectedVariant.value!, (newValue) => {
             >
                 {{ product!.category.name }}
             </NuxtLink>
-            <h1 class="typo-h-4 xl:typo-h-3 max-lg:hidden"> {{ product!.name }} </h1>
+            <h1 class="typo-h-4 xl:typo-h-3 max-lg:hidden">
+                {{ product!.name }}
+            </h1>
             <div class="flex w-full items-center justify-between h-[85px] max-lg:hidden">
                 <div class="flex items-end gap-4">
                     <div class="flex flex-col gap-2">
@@ -114,9 +132,7 @@ watch(() => selectedVariant.value!, (newValue) => {
                         >
                             {{ selectedVariant!.price }}
                         </span>
-                        <span
+                        <span class="typo-p-2xl relative flex-center w-fit font-medium">
-                            class="typo-p-2xl relative flex-center w-fit font-medium"
-                        >
                             {{ selectedVariant!.discount > 0 ? selectedVariant!.price : selectedVariant!.price }}
                         </span>
                     </div>
@@ -124,37 +140,42 @@ watch(() => selectedVariant.value!, (newValue) => {
                         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" />
+                        <Icon
+                            name="material-symbols:percent"
+                            class="size-4"
+                        />
                         {{ selectedVariant!.discount }}
                         <span class="max-sm:hidden">درصد</span>
                         تخفیف
                     </div>
 
-                    <Rating :rate="3" class="sm:hidden" />
+                    <Rating
-
+                        :rate="3"
+                        class="sm:hidden"
+                    />
                 </div>
 
-                <Rating :rate="3" class="max-sm:hidden" />
+                <Rating
-
+                    :rate="3"
+                    class="max-sm:hidden"
+                />
             </div>
 
             <div
-                class="py-8 typo-p-md text-slate-500 text-justify [&_a]:text-blue-400 [&_strong]:font-bold [&_u]:text-red-400"
+                class="py-8 typo-sm max-sm:leading-[175%] sm:typo-p-md text-slate-500 text-justify [&_a]:text-blue-400 [&_strong]:font-bold [&_u]:text-red-400"
                 v-html="product!.description"
             />
 
             <div class="flex items-center gap-4">
-                <span class="typo-p-lg">
+                <span class="typo-md sm:typo-p-lg"> تنوع رنگی : </span>
-                    تنوع رنگی :
-                </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 "
+                        :selected="selectedColor === color"
-                        :style="{backgroundColor: color}"
+                        :style="{ backgroundColor: color }"
                         class="cursor-pointer"
                     />
                 </div>
@@ -162,7 +183,7 @@ 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"
@@ -171,7 +192,6 @@ watch(() => selectedVariant.value!, (newValue) => {
             </div>
 
             <div class="w-full flex flex-col gap-6 mt-10">
-
                 <RemainQuantity
                     :maxQuantity="selectedVariant!.in_stock"
                     :quantity="selectedQuantity"
@@ -184,24 +204,31 @@ watch(() => selectedVariant.value!, (newValue) => {
                             @click="addItemToCart"
                             :loading="isAddCartItemPending"
                             :disabled="isAddCartItemPending"
-                            class="w-full rounded-full"
+                            class="w-full rounded-full max-sm:h-[48px]"
                             end-icon="ci:plus"
                         >
-
                             افزودن به سبد خرید
                         </Button>
-                        <NuxtLink v-else to="/cart" class="w-full">
+                        <NuxtLink
+                            v-else
+                            to="/cart"
+                            class="w-full"
+                        >
                             <Button
-                                class="w-full rounded-full h-full"
+                                class="w-full rounded-full h-full max-sm:h-[48px]"
                                 end-icon="ci:cart"
                             >
                                 مشاهده در سبد خرید
                             </Button>
                         </NuxtLink>
                     </template>
-                    <NuxtLink v-else to="/signin" class="w-full">
+                    <NuxtLink
+                        v-else
+                        to="/signin"
+                        class="w-full"
+                    >
                         <Button
-                            class="w-full rounded-full h-full"
+                            class="w-full rounded-full h-full max-sm:h-[48px]"
                             end-icon="ci:user"
                         >
                             ابتدا وارد شوید
@@ -216,13 +243,11 @@ watch(() => selectedVariant.value!, (newValue) => {
                     />
 
                     <UpdateQuantity v-else />
-
                 </div>
 
                 <InfoCard />
 
                 <Share />
-
             </div>
         </div>
     </div>