Add prettier config, format codebase

src/content/Animations/GlareHover/GlareHover.vue

@@ -1,20 +1,20 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed } from 'vue';
 
 interface GlareHoverProps {
-  width?: string
-  height?: string
-  background?: string
-  borderRadius?: string
-  borderColor?: string
-  glareColor?: string
-  glareOpacity?: number
-  glareAngle?: number
-  glareSize?: number
-  transitionDuration?: number
-  playOnce?: boolean
-  className?: string
-  style?: Record<string, string | number>
+  width?: string;
+  height?: string;
+  background?: string;
+  borderRadius?: string;
+  borderColor?: string;
+  glareColor?: string;
+  glareOpacity?: number;
+  glareAngle?: number;
+  glareSize?: number;
+  transitionDuration?: number;
+  playOnce?: boolean;
+  className?: string;
+  style?: Record<string, string | number>;
 }
 
 const props = withDefaults(defineProps<GlareHoverProps>(), {
@@ -31,28 +31,28 @@ const props = withDefaults(defineProps<GlareHoverProps>(), {
   playOnce: false,
   className: '',
   style: () => ({})
-})
+});
 
-const overlayRef = ref<HTMLDivElement | null>(null)
+const overlayRef = ref<HTMLDivElement | null>(null);
 
 const rgba = computed(() => {
-  const hex = props.glareColor.replace('#', '')
-  let result = props.glareColor
-  
+  const hex = props.glareColor.replace('#', '');
+  let result = props.glareColor;
+
   if (/^[\dA-Fa-f]{6}$/.test(hex)) {
-    const r = parseInt(hex.slice(0, 2), 16)
-    const g = parseInt(hex.slice(2, 4), 16)
-    const b = parseInt(hex.slice(4, 6), 16)
-    result = `rgba(${r}, ${g}, ${b}, ${props.glareOpacity})`
+    const r = parseInt(hex.slice(0, 2), 16);
+    const g = parseInt(hex.slice(2, 4), 16);
+    const b = parseInt(hex.slice(4, 6), 16);
+    result = `rgba(${r}, ${g}, ${b}, ${props.glareOpacity})`;
   } else if (/^[\dA-Fa-f]{3}$/.test(hex)) {
-    const r = parseInt(hex[0] + hex[0], 16)
-    const g = parseInt(hex[1] + hex[1], 16)
-    const b = parseInt(hex[2] + hex[2], 16)
-    result = `rgba(${r}, ${g}, ${b}, ${props.glareOpacity})`
+    const r = parseInt(hex[0] + hex[0], 16);
+    const g = parseInt(hex[1] + hex[1], 16);
+    const b = parseInt(hex[2] + hex[2], 16);
+    result = `rgba(${r}, ${g}, ${b}, ${props.glareOpacity})`;
   }
-  
-  return result
-})
+
+  return result;
+});
 
 const overlayStyle = computed(() => ({
   position: 'absolute' as const,
@@ -64,32 +64,32 @@ const overlayStyle = computed(() => ({
   backgroundSize: `${props.glareSize}% ${props.glareSize}%, 100% 100%`,
   backgroundRepeat: 'no-repeat',
   backgroundPosition: '-100% -100%, 0 0',
-  pointerEvents: 'none' as const,
-}))
+  pointerEvents: 'none' as const
+}));
 
 const animateIn = () => {
-  const el = overlayRef.value
-  if (!el) return
+  const el = overlayRef.value;
+  if (!el) return;
 
-  el.style.transition = 'none'
-  el.style.backgroundPosition = '-100% -100%, 0 0'
-  void el.offsetHeight
-  el.style.transition = `${props.transitionDuration}ms ease`
-  el.style.backgroundPosition = '100% 100%, 0 0'
-}
+  el.style.transition = 'none';
+  el.style.backgroundPosition = '-100% -100%, 0 0';
+  void el.offsetHeight;
+  el.style.transition = `${props.transitionDuration}ms ease`;
+  el.style.backgroundPosition = '100% 100%, 0 0';
+};
 
 const animateOut = () => {
-  const el = overlayRef.value
-  if (!el) return
+  const el = overlayRef.value;
+  if (!el) return;
 
   if (props.playOnce) {
-    el.style.transition = 'none'
-    el.style.backgroundPosition = '-100% -100%, 0 0'
+    el.style.transition = 'none';
+    el.style.backgroundPosition = '-100% -100%, 0 0';
   } else {
-    el.style.transition = `${props.transitionDuration}ms ease`
-    el.style.backgroundPosition = '-100% -100%, 0 0'
+    el.style.transition = `${props.transitionDuration}ms ease`;
+    el.style.backgroundPosition = '-100% -100%, 0 0';
   }
-}
+};
 </script>
 
 <template>
@@ -101,12 +101,13 @@ const animateOut = () => {
       background: props.background,
       borderRadius: props.borderRadius,
       borderColor: props.borderColor,
-      ...props.style,
+      ...props.style
     }"
     @mouseenter="animateIn"
     @mouseleave="animateOut"
   >
     <div ref="overlayRef" :style="overlayStyle" />
+
     <slot />
   </div>
 </template>