removed unneccesary imports

frontend/components/home/Preview.vue

@@ -1,9 +1,4 @@
 <script setup lang="ts">
-
-// import
-
-import { useDraggable } from "@vueuse/core";
-
 // state
 
 const clipPathPercent = ref(49);
@@ -13,39 +8,43 @@ const previewContainerEl = ref<HTMLElement | null>(null);
 
 const { x: dragAxisX } = useDraggable(draggableEl, {
     initialValue: { x: 0, y: 0 },
-    axis: "x"
+    axis: "x",
 });
 
 // watch
 
-watch(() => dragAxisX.value, (newValue) => {
-    const clientRect = previewContainerEl.value?.getBoundingClientRect()!;
-    const percent = clientRect.width / 100;
-    const clipPercent = (newValue - clientRect.x - 8) / percent;
-    if (clipPercent >= 5 && clipPercent <= 95) {
-        clipPathPercent.value = clipPercent;
+watch(
+    () => dragAxisX.value,
+    (newValue) => {
+        const clientRect = previewContainerEl.value?.getBoundingClientRect()!;
+        const percent = clientRect.width / 100;
+        const clipPercent = (newValue - clientRect.x - 8) / percent;
+        if (clipPercent >= 5 && clipPercent <= 95) {
+            clipPathPercent.value = clipPercent;
+        }
     }
-});
-
+);
 </script>
 
 <template>
     <div class="container">
         <div class="flex flex-col items-center gap-3 mb-16">
             <span class="typo-p-md text-slate-500">یک متن تست لورم</span>
-            <span class="typo-h-3 text-black">تفاوت محصول را ببینید در اینجا</span>
+            <span class="typo-h-3 text-black"
+                >تفاوت محصول را ببینید در اینجا</span
+            >
         </div>
-        <div ref="previewContainerEl" class="rounded-200 overflow-hidden h-[90svh] relative">
-
+        <div
+            ref="previewContainerEl"
+            class="rounded-200 overflow-hidden h-[90svh] relative"
+        >
             <img
                 src="/img/hero-bg.jpg"
                 class="select-none absolute size-full object-cover"
                 alt=""
             />
 
-            <div
-                class="absolute size-full right-0 w-full"
-            >
+            <div class="absolute size-full right-0 w-full">
                 <img
                     src="/img/hero-bg.jpg"
                     class="overlay-image select-none absolute object-cover size-full hue-rotate-200 brightness-35"
@@ -53,7 +52,7 @@ watch(() => dragAxisX.value, (newValue) => {
                 />
                 <div
                     :style="{
-                        left: `${clipPathPercent}%`
+                        left: `${clipPathPercent}%`,
                     }"
                     ref="draggableEl"
                     class="select-none w-2 h-full bg-white absolute left-0 flex items-center justify-center"
@@ -61,12 +60,18 @@ watch(() => dragAxisX.value, (newValue) => {
                     <div
                         class="cursor-grab hover:scale-115 transition-transform rounded-full absolute bg-white size-11 flex items-center justify-center"
                     >
-                        <Icon name="ci:arrows" size="24" class="**:stroke-black" />
+                        <Icon
+                            name="ci:arrows"
+                            size="24"
+                            class="**:stroke-black"
+                        />
                     </div>
                 </div>
             </div>
 
-            <div class="absolute bottom-0 p-10 w-full flex justify-between items-end bg-linear-to-t from-black/55 to-transparent">
+            <div
+                class="absolute bottom-0 p-10 w-full flex justify-between items-end bg-linear-to-t from-black/55 to-transparent"
+            >
                 <div class="flex flex-col gap-2 text-white">
                     <span class="typo-p-md">رنگ محصول</span>
                     <span class="typo-h-3">نارنجی</span>
@@ -76,7 +81,6 @@ watch(() => dragAxisX.value, (newValue) => {
                     <span class="typo-h-3">سفید</span>
                 </div>
             </div>
-
         </div>
     </div>
 </template>
@@ -90,4 +94,4 @@ watch(() => dragAxisX.value, (newValue) => {
         v-bind('clipPathPercent + "%"') 100%
     );
 }
-</style>
+</style>