CollaboratorFeatures_diagram.js

import React from "react";
import DiagramStyles from "../../diagram/diagram.style";
import { ReactComponent as Collab1 } from "./images/collab1-colorMode.svg";
import { ReactComponent as Collab2 } from "./images/collab2-colorMode.svg";
import { ReactComponent as Collab3 } from "./images/collab3-colorMode.svg";
import { ReactComponent as Collab4 } from "./images/collab4-colorMode.svg";
import Avatar1 from "./images/avatar1.webp";
import Avatar2 from "./images/avatar2.webp";
import Avatar3 from "./images/avatar3.webp";
import { useInView } from "react-intersection-observer";

const CollaboratorFeaturesDiagram = ({ activeExampleIndex }) => {
  const [ref, inView] = useInView({ threshold: 0.6 });
  const [ref2, inView2] = useInView({ threshold: 0.4 });

  return (
    <DiagramStyles>
      <div className="transitions">
        <div className="avatars">
          <img id="avatar-1" ref={ref} className={inView && activeExampleIndex == 0 ? "show" : "render"} src={Avatar1} alt="Collaborator avatar one" />
          <img id="avatar-2" className={(activeExampleIndex == 1) ? "show" : "render"} src={Avatar2} alt="Collaborator avatar two" />
          <img id="avatar-3" className={(activeExampleIndex >= 2) ? "show" : "render"} src={Avatar3} alt="Collaborator avatar three"  />
        </div>
        <div className="root" ref={ref2} style={{ minHeight: "25rem", minWidth: "41rem" }}>
          <Collab1 id="collaborate-image1" className={inView2 && activeExampleIndex == 0 ? "show" : "render"} alt="collaborate-image1"  />
          <Collab2 id="collaborate-image2" className={(activeExampleIndex == 1) ? "show" : "render"} alt="collaborate-image2" />
          <Collab3 id="collaborate-image3" className={(activeExampleIndex == 2) ? "show" : "render"} alt="collaborate-image3" />
          <Collab4 id="collaborate-image4" className={(activeExampleIndex >= 3) ? "show" : "render"} alt="collaborate-image4" />
        </div>
      </div>
    </DiagramStyles>
  );
};

export default CollaboratorFeaturesDiagram;