fix lint

Author: alissacrane-cb

apps/web/src/components/Developers/Shared/AnimatedBeam.tsx

@@ -1,9 +1,9 @@
 'use client';
 
 import { motion } from 'motion/react';
-import { RefObject, useEffect, useId, useState } from 'react';
+import { RefObject, useEffect, useId, useMemo, useState } from 'react';
 
-export interface AnimatedBeamProps {
+export type AnimatedBeamProps = {
   className?: string;
   containerRef: RefObject<HTMLElement | null>; // Container ref
   fromRef: RefObject<HTMLElement | null>;
@@ -21,10 +21,9 @@ export interface AnimatedBeamProps {
   startYOffset?: number;
   endXOffset?: number;
   endYOffset?: number;
-}
+};
 
-export const AnimatedBeam: React.FC<AnimatedBeamProps> = ({
-  className,
+export function AnimatedBeam({
   containerRef,
   fromRef,
   toRef,
@@ -41,26 +40,11 @@ export const AnimatedBeam: React.FC<AnimatedBeamProps> = ({
   startYOffset = 0,
   endXOffset = 0,
   endYOffset = 0,
-}) => {
+}: AnimatedBeamProps) {
   const id = useId();
   const [pathD, setPathD] = useState('');
   const [svgDimensions, setSvgDimensions] = useState({ width: 0, height: 0 });
 
-  // Calculate the gradient coordinates based on the reverse prop
-  const gradientCoordinates = reverse
-    ? {
-        x1: ['90%', '-10%'],
-        x2: ['100%', '0%'],
-        y1: ['0%', '0%'],
-        y2: ['0%', '0%'],
-      }
-    : {
-        x1: ['10%', '110%'],
-        x2: ['0%', '100%'],
-        y1: ['0%', '0%'],
-        y2: ['0%', '0%'],
-      };
-
   useEffect(() => {
     const updatePath = () => {
       if (containerRef.current && fromRef.current && toRef.current) {
@@ -86,9 +70,9 @@ export const AnimatedBeam: React.FC<AnimatedBeamProps> = ({
     // Initialize ResizeObserver
     const resizeObserver = new ResizeObserver((entries) => {
       // For all entries, recalculate the path
-      for (let entry of entries) {
+      entries.forEach(() => {
         updatePath();
-      }
+      });
     });
 
     // Observe the container element
@@ -105,6 +89,48 @@ export const AnimatedBeam: React.FC<AnimatedBeamProps> = ({
     };
   }, [containerRef, fromRef, toRef, curvature, startXOffset, startYOffset, endXOffset, endYOffset]);
 
+  const initial = useMemo(() => {
+    return {
+      x1: '0%',
+      x2: '0%',
+      y1: '0%',
+      y2: '0%',
+    };
+  }, []);
+
+  const animate = useMemo(() => {
+    // Calculate the gradient coordinates based on the reverse prop
+    const gradientCoordinates = reverse
+      ? {
+          x1: ['90%', '-10%'],
+          x2: ['100%', '0%'],
+          y1: ['0%', '0%'],
+          y2: ['0%', '0%'],
+        }
+      : {
+          x1: ['10%', '110%'],
+          x2: ['0%', '100%'],
+          y1: ['0%', '0%'],
+          y2: ['0%', '0%'],
+        };
+    return {
+      x1: gradientCoordinates.x1,
+      x2: gradientCoordinates.x2,
+      y1: gradientCoordinates.y1,
+      y2: gradientCoordinates.y2,
+    };
+  }, [reverse]);
+
+  const transition = useMemo(() => {
+    return {
+      delay,
+      duration,
+      ease: [0.16, 1, 0.3, 1], // https://easings.net/#easeOutExpo
+      repeat: Infinity,
+      repeatDelay: 0,
+    };
+  }, [delay, duration]);
+
   return (
     <svg
       fill="none"
@@ -132,33 +158,17 @@ export const AnimatedBeam: React.FC<AnimatedBeamProps> = ({
         <motion.linearGradient
           className="transform-gpu"
           id={id}
-          gradientUnits={'userSpaceOnUse'}
-          initial={{
-            x1: '0%',
-            x2: '0%',
-            y1: '0%',
-            y2: '0%',
-          }}
-          animate={{
-            x1: gradientCoordinates.x1,
-            x2: gradientCoordinates.x2,
-            y1: gradientCoordinates.y1,
-            y2: gradientCoordinates.y2,
-          }}
-          transition={{
-            delay,
-            duration,
-            ease: [0.16, 1, 0.3, 1], // https://easings.net/#easeOutExpo
-            repeat: Infinity,
-            repeatDelay: 0,
-          }}
+          gradientUnits="userSpaceOnUse"
+          initial={initial}
+          animate={animate}
+          transition={transition}
         >
-          <stop stopColor={gradientStartColor} stopOpacity="0"></stop>
-          <stop stopColor={gradientStartColor}></stop>
-          <stop offset="32.5%" stopColor={gradientStopColor}></stop>
-          <stop offset="100%" stopColor={gradientStopColor} stopOpacity="0"></stop>
+          <stop stopColor={gradientStartColor} stopOpacity="0" />
+          <stop stopColor={gradientStartColor} />
+          <stop offset="32.5%" stopColor={gradientStopColor} />
+          <stop offset="100%" stopColor={gradientStopColor} stopOpacity="0" />
         </motion.linearGradient>
       </defs>
     </svg>
   );
-};
+}