Add prettier config, format codebase

src/content/TextAnimations/CircularText/CircularText.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { computed, ref, watchEffect, onUnmounted } from 'vue'
-import { Motion } from 'motion-v'
+import { computed, ref, watchEffect, onUnmounted } from 'vue';
+import { Motion } from 'motion-v';
 
 interface CircularTextProps {
-  text: string
-  spinDuration?: number
-  onHover?: 'slowDown' | 'speedUp' | 'pause' | 'goBonkers'
-  className?: string
+  text: string;
+  spinDuration?: number;
+  onHover?: 'slowDown' | 'speedUp' | 'pause' | 'goBonkers';
+  className?: string;
 }
 
 const props = withDefaults(defineProps<CircularTextProps>(), {
@@ -14,99 +14,101 @@ const props = withDefaults(defineProps<CircularTextProps>(), {
   spinDuration: 20,
   onHover: 'speedUp',
   className: ''
-})
+});
 
-const letters = computed(() => Array.from(props.text))
-const isHovered = ref(false)
+const letters = computed(() => Array.from(props.text));
+const isHovered = ref(false);
 
-const currentRotation = ref(0)
-const animationId = ref<number | null>(null)
-const lastTime = ref<number>(Date.now())
-const rotationSpeed = ref<number>(0)
+const currentRotation = ref(0);
+const animationId = ref<number | null>(null);
+const lastTime = ref<number>(Date.now());
+const rotationSpeed = ref<number>(0);
 
 const getCurrentSpeed = () => {
-  if (isHovered.value && props.onHover === 'pause') return 0
+  if (isHovered.value && props.onHover === 'pause') return 0;
 
-  const baseDuration = props.spinDuration
-  const baseSpeed = 360 / baseDuration
+  const baseDuration = props.spinDuration;
+  const baseSpeed = 360 / baseDuration;
 
-  if (!isHovered.value) return baseSpeed
+  if (!isHovered.value) return baseSpeed;
 
   switch (props.onHover) {
     case 'slowDown':
-      return baseSpeed / 2
+      return baseSpeed / 2;
     case 'speedUp':
-      return baseSpeed * 4
+      return baseSpeed * 4;
     case 'goBonkers':
-      return baseSpeed * 20
+      return baseSpeed * 20;
     default:
-      return baseSpeed
+      return baseSpeed;
   }
-}
+};
 
 const getCurrentScale = () => {
-  return (isHovered.value && props.onHover === 'goBonkers') ? 0.8 : 1
-}
+  return isHovered.value && props.onHover === 'goBonkers' ? 0.8 : 1;
+};
 
 const animate = () => {
-  const now = Date.now()
-  const deltaTime = (now - lastTime.value) / 1000
-  lastTime.value = now
+  const now = Date.now();
+  const deltaTime = (now - lastTime.value) / 1000;
+  lastTime.value = now;
 
-  const targetSpeed = getCurrentSpeed()
+  const targetSpeed = getCurrentSpeed();
 
-  const speedDiff = targetSpeed - rotationSpeed.value
-  const smoothingFactor = Math.min(1, deltaTime * 5)
-  rotationSpeed.value += speedDiff * smoothingFactor
+  const speedDiff = targetSpeed - rotationSpeed.value;
+  const smoothingFactor = Math.min(1, deltaTime * 5);
+  rotationSpeed.value += speedDiff * smoothingFactor;
 
-  currentRotation.value = (currentRotation.value + rotationSpeed.value * deltaTime) % 360
+  currentRotation.value = (currentRotation.value + rotationSpeed.value * deltaTime) % 360;
 
-  animationId.value = requestAnimationFrame(animate)
-}
+  animationId.value = requestAnimationFrame(animate);
+};
 
 const startAnimation = () => {
   if (animationId.value) {
-    cancelAnimationFrame(animationId.value)
+    cancelAnimationFrame(animationId.value);
   }
-  lastTime.value = Date.now()
-  rotationSpeed.value = getCurrentSpeed()
-  animate()
-}
+  lastTime.value = Date.now();
+  rotationSpeed.value = getCurrentSpeed();
+  animate();
+};
 
 watchEffect(() => {
-  startAnimation()
-})
+  startAnimation();
+});
 
-startAnimation()
+startAnimation();
 
 onUnmounted(() => {
   if (animationId.value) {
-    cancelAnimationFrame(animationId.value)
+    cancelAnimationFrame(animationId.value);
   }
-})
+});
 
 const handleHoverStart = () => {
-  isHovered.value = true
-}
+  isHovered.value = true;
+};
 
 const handleHoverEnd = () => {
-  isHovered.value = false
-}
+  isHovered.value = false;
+};
 
 const getLetterTransform = (index: number) => {
-  const rotationDeg = (360 / letters.value.length) * index
-  const factor = Math.PI / letters.value.length
-  const x = factor * index
-  const y = factor * index
-  return `rotateZ(${rotationDeg}deg) translate3d(${x}px, ${y}px, 0)`
-}
+  const rotationDeg = (360 / letters.value.length) * index;
+  const factor = Math.PI / letters.value.length;
+  const x = factor * index;
+  const y = factor * index;
+  return `rotateZ(${rotationDeg}deg) translate3d(${x}px, ${y}px, 0)`;
+};
 </script>
 
 <template>
-  <Motion :animate="{
-    rotate: currentRotation,
-    scale: getCurrentScale()
-  }" :transition="{
+  <Motion
+    :animate="{
+      rotate: currentRotation,
+      scale: getCurrentScale()
+    }"
+    :transition="{
       rotate: {
         duration: 0
       },
@@ -117,13 +119,19 @@ const getLetterTransform = (index: number) => {
       }
     }"
     :class="`m-0 mx-auto rounded-full w-[200px] h-[200px] relative font-black text-white text-center cursor-pointer origin-center ${props.className}`"
-    @mouseenter="handleHoverStart" @mouseleave="handleHoverEnd">
-    <span v-for="(letter, i) in letters" :key="i"
-      class="absolute inline-block inset-0 text-2xl transition-all duration-500 ease-[cubic-bezier(0,0,0,1)]" :style="{
+    @mouseenter="handleHoverStart"
+    @mouseleave="handleHoverEnd"
+  >
+    <span
+      v-for="(letter, i) in letters"
+      :key="i"
+      class="absolute inline-block inset-0 text-2xl transition-all duration-500 ease-[cubic-bezier(0,0,0,1)]"
+      :style="{
         transform: getLetterTransform(i),
         WebkitTransform: getLetterTransform(i)
-      }">
+      }"
+    >
       {{ letter }}
     </span>
   </Motion>
-</template>
+</template>