Merge pull request #26 from lassiecoder/staging

fix: tracing-beam ref issue fixed

Author: lassiecoder

src/components/ui/tracing-beam.tsx

@@ -5,22 +5,21 @@ import {
   useTransform,
   useScroll,
   useVelocity,
-  useSpring
+  useSpring,
 } from "framer-motion";
 import { cn } from "../utils/cn";
 
 export const TracingBeam = ({
   children,
-  className
+  className,
 }: {
   children: React.ReactNode;
   className?: string;
 }) => {
-  // const ref = useRef<HTMLDivElement>(null);
-  const ref = useRef<HTMLDivElement>(null!) as React.RefObject<HTMLElement>;
+  const ref = useRef<HTMLDivElement>(null);
   const { scrollYProgress } = useScroll({
     target: ref,
-    offset: ["start start", "end start"]
+    offset: ["start start", "end start"],
   });
 
   const contentRef = useRef<HTMLDivElement>(null);
@@ -36,56 +35,48 @@ export const TracingBeam = ({
     useTransform(scrollYProgress, [0, 0.8], [50, svgHeight]),
     {
       stiffness: 500,
-      damping: 90
+      damping: 90,
     }
   );
   const y2 = useSpring(
     useTransform(scrollYProgress, [0, 1], [50, svgHeight - 200]),
     {
       stiffness: 500,
-      damping: 90
+      damping: 90,
     }
   );
 
   return (
     <motion.div
       ref={ref}
-      {...{
-        className: cn("relative w-full max-w-4xl mx-auto h-full", className)
-      }}
+      className={cn("relative w-full max-w-4xl mx-auto h-full", className)}
     >
       <div className="absolute -left-4 md:-left-20 top-3">
         <motion.div
           transition={{
             duration: 0.2,
-            delay: 0.5
+            delay: 0.5,
           }}
           animate={{
             boxShadow:
               scrollYProgress.get() > 0
                 ? "none"
-                : "rgba(0, 0, 0, 0.24) 0px 3px 8px"
-          }}
-          {...{
-            className:
-              "ml-[27px] h-4 w-4 rounded-full border border-netural-200 shadow-sm flex items-center justify-center"
+                : "rgba(0, 0, 0, 0.24) 0px 3px 8px",
           }}
+          className="ml-[27px] h-4 w-4 rounded-full border border-netural-200 shadow-sm flex items-center justify-center"
         >
           <motion.div
             transition={{
               duration: 0.2,
-              delay: 0.5
+              delay: 0.5,
             }}
             animate={{
               backgroundColor:
                 scrollYProgress.get() > 0 ? "white" : "var(--emerald-500)",
               borderColor:
-                scrollYProgress.get() > 0 ? "white" : "var(--emerald-600)"
-            }}
-            {...{
-              className:
-                "h-2 w-2  rounded-full border border-neutral-300 bg-white"
+                scrollYProgress.get() > 0 ? "white" : "var(--emerald-600)",
             }}
+            className="h-2 w-2  rounded-full border border-neutral-300 bg-white"
           />
         </motion.div>
         <svg
@@ -101,7 +92,7 @@ export const TracingBeam = ({
             stroke="#9091A0"
             strokeOpacity="0.16"
             transition={{
-              duration: 10
+              duration: 10,
             }}
           ></motion.path>
           <motion.path
@@ -111,7 +102,7 @@ export const TracingBeam = ({
             strokeWidth="1.25"
             className="motion-reduce:hidden"
             transition={{
-              duration: 10
+              duration: 10,
             }}
           ></motion.path>
           <defs>