Updated

frontend/components/global/product/StickyCard.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-
 // types
 
 type Props = {
@@ -7,33 +6,49 @@ type Props = {
     title: string;
     color: string;
     price: string;
-}
+};
 
 // props
 
 const props = defineProps<Props>();
 const { picture, price, title, color } = toRefs(props);
 
+// methods
+
+const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+};
 </script>
 
 <template>
-    <div class="max-w-[500px] w-full h-[116px] flex items-center justify-between py-2 pe-6 ps-2 bg-white rounded-150">
+    <div
+        class="max-w-[500px] w-full h-[116px] flex items-center justify-between py-2 pe-6 ps-2 gap-4 bg-white rounded-150"
+    >
         <div class="flex items-center gap-4">
             <div class="relative size-[100px] rounded-100 overflow-hidden border-[0.5px] border-slate-200">
-                <NuxtImg :src="picture" :alt="title" class="object-cover absolute" />
+                <NuxtImg
+                    :src="picture"
+                    :alt="title"
+                    class="object-cover absolute"
+                />
             </div>
             <div class="flex flex-col gap-1.5">
                 <span class="typo-sub-h-md text-black">{{ title }}</span>
                 <div class="flex items-center gap-2">
                     <span class="typo-p-sm text-slate-500">رنگ</span>
-                    <ColorCircle class="!size-5" :style="{backgroundColor: color}" />
+                    <ColorCircle
+                        class="!size-5"
+                        :style="{ backgroundColor: color }"
+                    />
                 </div>
                 <span class="typo-p-md text-black">{{ price }}</span>
             </div>
         </div>
-        <Button class="rounded-full max-sm:h-[45px]">
-            افزودن
-            <span class="max-sm:hidden">به سبد</span>
+        <Button
+            @click="scrollToTop"
+            class="rounded-full max-sm:h-[45px]"
+        >
+            مشاهده
         </Button>
     </div>
-</template>
+</template>