Add prettier config, format codebase

src/content/Animations/Magnet/Magnet.vue

@@ -1,27 +1,34 @@
 <template>
-  <div ref="magnetRef" :class="wrapperClassName" :style="{ position: 'relative', display: 'inline-block' }"
-    v-bind="$attrs">
-    <div :class="innerClassName" :style="{
-      transform: `translate3d(${position.x}px, ${position.y}px, 0)`,
-      transition: transitionStyle,
-      willChange: 'transform',
-    }">
+  <div
+    ref="magnetRef"
+    :class="wrapperClassName"
+    :style="{ position: 'relative', display: 'inline-block' }"
+    v-bind="$attrs"
+  >
+    <div
+      :class="innerClassName"
+      :style="{
+        transform: `translate3d(${position.x}px, ${position.y}px, 0)`,
+        transition: transitionStyle,
+        willChange: 'transform'
+      }"
+    >
       <slot />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
 
 interface Props {
-  padding?: number
-  disabled?: boolean
-  magnetStrength?: number
-  activeTransition?: string
-  inactiveTransition?: string
-  wrapperClassName?: string
-  innerClassName?: string
+  padding?: number;
+  disabled?: boolean;
+  magnetStrength?: number;
+  activeTransition?: string;
+  inactiveTransition?: string;
+  wrapperClassName?: string;
+  innerClassName?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -32,53 +39,54 @@ const props = withDefaults(defineProps<Props>(), {
   inactiveTransition: 'transform 0.5s ease-in-out',
   wrapperClassName: '',
   innerClassName: ''
-})
+});
 
 defineOptions({
   inheritAttrs: false
-})
+});
 
-const magnetRef = ref<HTMLDivElement | null>(null)
-const isActive = ref(false)
-const position = ref({ x: 0, y: 0 })
+const magnetRef = ref<HTMLDivElement | null>(null);
+const isActive = ref(false);
+const position = ref({ x: 0, y: 0 });
 
-const transitionStyle = computed(() =>
-  isActive.value ? props.activeTransition : props.inactiveTransition
-)
+const transitionStyle = computed(() => (isActive.value ? props.activeTransition : props.inactiveTransition));
 
 const handleMouseMove = (e: MouseEvent) => {
-  if (!magnetRef.value || props.disabled) return
+  if (!magnetRef.value || props.disabled) return;
 
-  const { left, top, width, height } = magnetRef.value.getBoundingClientRect()
-  const centerX = left + width / 2
-  const centerY = top + height / 2
+  const { left, top, width, height } = magnetRef.value.getBoundingClientRect();
+  const centerX = left + width / 2;
+  const centerY = top + height / 2;
 
-  const distX = Math.abs(centerX - e.clientX)
-  const distY = Math.abs(centerY - e.clientY)
+  const distX = Math.abs(centerX - e.clientX);
+  const distY = Math.abs(centerY - e.clientY);
 
   if (distX < width / 2 + props.padding && distY < height / 2 + props.padding) {
-    isActive.value = true
-    const offsetX = (e.clientX - centerX) / props.magnetStrength
-    const offsetY = (e.clientY - centerY) / props.magnetStrength
-    position.value = { x: offsetX, y: offsetY }
+    isActive.value = true;
+    const offsetX = (e.clientX - centerX) / props.magnetStrength;
+    const offsetY = (e.clientY - centerY) / props.magnetStrength;
+    position.value = { x: offsetX, y: offsetY };
   } else {
-    isActive.value = false
-    position.value = { x: 0, y: 0 }
+    isActive.value = false;
+    position.value = { x: 0, y: 0 };
   }
-}
+};
 
 onMounted(() => {
-  window.addEventListener('mousemove', handleMouseMove)
-})
+  window.addEventListener('mousemove', handleMouseMove);
+});
 
 onUnmounted(() => {
-  window.removeEventListener('mousemove', handleMouseMove)
-})
+  window.removeEventListener('mousemove', handleMouseMove);
+});
 
-watch(() => props.disabled, (newDisabled) => {
-  if (newDisabled) {
-    position.value = { x: 0, y: 0 }
-    isActive.value = false
+watch(
+  () => props.disabled,
+  newDisabled => {
+    if (newDisabled) {
+      position.value = { x: 0, y: 0 };
+      isActive.value = false;
+    }
   }
-})
+);
 </script>