made it reusable and only for one collaborator component

Signed-off-by: captain-Akshay <[email protected]>
layer5io · Dec 18, 2023 · c2f133c · c2f133c
1 parent 29f29b1
commit c2f133c
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 45 deletions.
diff --git a/src/components/Features/index.js b/src/components/Features/index.js
@@ -22,54 +22,54 @@ const Features = (props) => {
     return persons[index];
   }
   useEffect(() => {
-    const container = containerRef.current;
+    if (props.cursor !== undefined) {
+      const container = containerRef.current;
 
-    const moveRandomly = (element) => {
-      const rect = container.getBoundingClientRect();
-      const maxX = rect.width;
-      const maxY = rect.height;
-      console.log(maxX, maxY, "here");
-      const randomX = Math.floor(Math.random() * maxX);
-      const halfMaxY = maxY / 2;
-      const randomY = Math.floor(Math.random() * (maxY + 1)) - halfMaxY;
+      const moveRandomly = (element) => {
+        const rect = container.getBoundingClientRect();
+        const maxX = rect.width;
+        const maxY = rect.height;
+        const randomX = Math.floor(Math.random() * maxX);
+        const halfMaxY = maxY / 2;
+        const randomY = Math.floor(Math.random() * (maxY + 1)) - halfMaxY;
 
-      element.style.transition = "transform 3s ease";
-      element.style.transform = `translate(${randomX}px, ${randomY}px)`;
+        element.style.transition = "transform 3s ease";
+        element.style.transform = `translate(${randomX}px, ${randomY}px)`;
 
-      setTimeout(() => {
-        element.style.transition = "";
-      }, 3000);
-    };
+        setTimeout(() => {
+          element.style.transition = "";
+        }, 3000);
+      };
 
-    const setInitialRandomPosition = (element) => {
-      const rect = container.getBoundingClientRect();
-      const maxX = rect.width - element.clientWidth;
-      const maxY = rect.height - element.clientHeight;
-      const randomX = Math.floor(Math.random() * maxX);
-      const randomY = Math.floor(Math.random() * maxY);
+      const setInitialRandomPosition = (element) => {
+        const rect = container.getBoundingClientRect();
+        const maxX = rect.width - element.clientWidth;
+        const maxY = rect.height - element.clientHeight;
+        const randomX = Math.floor(Math.random() * maxX);
+        const randomY = Math.floor(Math.random() * maxY);
 
-      element.style.transform = `translate(${randomX}px, ${randomY}px)`;
-    };
+        element.style.transform = `translate(${randomX}px, ${randomY}px)`;
+      };
 
-    const person1Element = container.querySelector(".person1");
-    const person2Element = container.querySelector(".person2");
+      const person1Element = container.querySelector(".person1");
+      const person2Element = container.querySelector(".person2");
+      setInitialRandomPosition(person1Element);
+      setInitialRandomPosition(person2Element);
 
-    setInitialRandomPosition(person1Element);
-    setInitialRandomPosition(person2Element);
+      const movePersonsRandomly = () => {
+        moveRandomly(person1Element);
+        setTimeout(() => {
+          moveRandomly(person2Element);
+        }, 3000);
+      };
 
-    const movePersonsRandomly = () => {
-      moveRandomly(person1Element);
-      setTimeout(() => {
-        moveRandomly(person2Element);
-      }, 3000);
-    };
+      movePersonsRandomly();
 
-    movePersonsRandomly();
+      const intervalId = setInterval(movePersonsRandomly, 6000);
 
-    const intervalId = setInterval(movePersonsRandomly, 6000);
-
-    return () => clearInterval(intervalId);
-  }, []);
+      return () => clearInterval(intervalId);
+    }
+  }, [props.cursor]);
   function mouseEnterEvent() {
     setWaveStart(true);
     setTimeout(() => {
@@ -82,15 +82,17 @@ const Features = (props) => {
   const style = {
     cursor: props.show_custom_cursor ? `url(${cursor}), auto` : "",
   };
-
   return (
     <Container
       ref={containerRef}
       style={style}
       onMouseEnter={mouseEnterEvent}
       onMouseLeave={mouseLeaveEvent}
     >
-      <SvgRandomWrapper className="person1">
+      <SvgRandomWrapper
+        className="person1"
+        style={{ display: props.cursor ? "none" : "" }}
+      >
         {waveStart && (
           <img
             src={wave}
@@ -99,10 +101,13 @@ const Features = (props) => {
             className="waveAnimation"
           />
         )}
-        <img src={getPerson(props.index * 2)} alt="" />
+        <img src={getPerson(props.cursor * 2)} alt="" />
       </SvgRandomWrapper>
-      <SvgRandomWrapper className="person2">
-        <img src={getPerson(props.index * 2 + 1)} alt="" />
+      <SvgRandomWrapper
+        className="person2"
+        style={{ display: props.cursor ? "none" : "" }}
+      >
+        <img src={getPerson(props.cursor * 2 + 1)} alt="" />
       </SvgRandomWrapper>
       <ContentWrapper>
         <h2>{props.title}</h2>

diff --git a/src/sections/Home/FeaturesContainer/index.js b/src/sections/Home/FeaturesContainer/index.js
@@ -32,7 +32,7 @@ const FeaturesContainer = () => {
           redirectLink="/comments"
           desc="Real-time collaboration for cloud and cloud native designs with live-editing, instant feedback, deploy dry runs, and secure access controls."
           imgLink={isDark ? CommentingImageDark : CommentingImageLight}
-          index={0}
+          cursor={0}
         />
         {/* Elevate teamwork with integrated communication channels, ensuring efficient and secure project success. */}
         <Features
@@ -41,7 +41,6 @@ const FeaturesContainer = () => {
           redirectLink="/whiteboard"
           desc="Crafting cloud-native symphonies: Our engineering diagramming tool is your conductor's baton, turning Kubernetes infrastructure into a canvas for freestyle orchestration."
           imgLink={isDark ? WhiteboardingImage : WhiteboardingImageLight}
-          index={1}
         />
       </Container>
       {/* a suite of annotation and visualization tools, allowing users to draw, annotate, and collaborate in real-time on their cloud native designs. */}