Add prettier config, format codebase

src/content/Animations/MagnetLines/MagnetLines.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed } from 'vue'
+import { ref, onMounted, onUnmounted, computed } from 'vue';
 
 interface MagnetLinesProps {
-  rows?: number
-  columns?: number
-  containerSize?: string
-  lineColor?: string
-  lineWidth?: string
-  lineHeight?: string
-  baseAngle?: number
-  className?: string
-  style?: Record<string, string | number>
+  rows?: number;
+  columns?: number;
+  containerSize?: string;
+  lineColor?: string;
+  lineWidth?: string;
+  lineHeight?: string;
+  baseAngle?: number;
+  className?: string;
+  style?: Record<string, string | number>;
 }
 
 const props = withDefaults(defineProps<MagnetLinesProps>(), {
@@ -23,53 +23,53 @@ const props = withDefaults(defineProps<MagnetLinesProps>(), {
   baseAngle: -10,
   className: '',
   style: () => ({})
-})
+});
 
-const containerRef = ref<HTMLDivElement | null>(null)
+const containerRef = ref<HTMLDivElement | null>(null);
 
-const total = computed(() => props.rows * props.columns)
+const total = computed(() => props.rows * props.columns);
 
 const onPointerMove = (pointer: { x: number; y: number }) => {
-  const container = containerRef.value
-  if (!container) return
+  const container = containerRef.value;
+  if (!container) return;
 
-  const items = container.querySelectorAll<HTMLSpanElement>('span')
+  const items = container.querySelectorAll<HTMLSpanElement>('span');
 
-  items.forEach((item) => {
-    const rect = item.getBoundingClientRect()
-    const centerX = rect.x + rect.width / 2
-    const centerY = rect.y + rect.height / 2
+  items.forEach(item => {
+    const rect = item.getBoundingClientRect();
+    const centerX = rect.x + rect.width / 2;
+    const centerY = rect.y + rect.height / 2;
 
-    const b = pointer.x - centerX
-    const a = pointer.y - centerY
-    const c = Math.sqrt(a * a + b * b) || 1
-    const r = ((Math.acos(b / c) * 180) / Math.PI) * (pointer.y > centerY ? 1 : -1)
+    const b = pointer.x - centerX;
+    const a = pointer.y - centerY;
+    const c = Math.sqrt(a * a + b * b) || 1;
+    const r = ((Math.acos(b / c) * 180) / Math.PI) * (pointer.y > centerY ? 1 : -1);
 
-    item.style.setProperty('--rotate', `${r}deg`)
-  })
-}
+    item.style.setProperty('--rotate', `${r}deg`);
+  });
+};
 
 const handlePointerMove = (e: PointerEvent) => {
-  onPointerMove({ x: e.x, y: e.y })
-}
+  onPointerMove({ x: e.x, y: e.y });
+};
 
 onMounted(() => {
-  const container = containerRef.value
-  if (!container) return
+  const container = containerRef.value;
+  if (!container) return;
 
-  window.addEventListener('pointermove', handlePointerMove)
+  window.addEventListener('pointermove', handlePointerMove);
 
-  const items = container.querySelectorAll<HTMLSpanElement>('span')
+  const items = container.querySelectorAll<HTMLSpanElement>('span');
   if (items.length) {
-    const middleIndex = Math.floor(items.length / 2)
-    const rect = items[middleIndex].getBoundingClientRect()
-    onPointerMove({ x: rect.x, y: rect.y })
+    const middleIndex = Math.floor(items.length / 2);
+    const rect = items[middleIndex].getBoundingClientRect();
+    onPointerMove({ x: rect.x, y: rect.y });
   }
-})
+});
 
 onUnmounted(() => {
-  window.removeEventListener('pointermove', handlePointerMove)
-})
+  window.removeEventListener('pointermove', handlePointerMove);
+});
 </script>
 
 <template>
@@ -81,7 +81,7 @@ onUnmounted(() => {
       gridTemplateRows: `repeat(${props.rows}, 1fr)`,
       width: props.containerSize,
       height: props.containerSize,
-      ...props.style,
+      ...props.style
     }"
   >
     <span
@@ -94,7 +94,7 @@ onUnmounted(() => {
         height: props.lineHeight,
         '--rotate': `${props.baseAngle}deg`,
         transform: 'rotate(var(--rotate))',
-        willChange: 'transform',
+        willChange: 'transform'
       }"
     />
   </div>