Dwinzo_dev/app/src/components/templates/FollowPerson.tsx

import React from "react";
import RenderOverlay from "./Overlay";
import { useSelectedUserStore } from "../../store/collaboration/useCollabStore";
import { useCamMode } from "../../store/builder/store";

const FollowPerson: React.FC = () => {
  // Get the selected user from the store
  const { selectedUser, clearSelectedUser } = useSelectedUserStore();
  const { setCamMode } = useCamMode();
  return (
    <RenderOverlay>
      {selectedUser && (
        // eslint-disable-next-line
        <div
          className="follow-person-container"
          onPointerDown={() => {
            clearSelectedUser();
            setCamMode("FirstPerson");
          }}
          style={{ "--user-color": selectedUser.color } as React.CSSProperties}
        >
          <div className="follower-name">Viewing through {selectedUser.name}’s eyes</div>
        </div>
      )}
    </RenderOverlay>
  );
};

export default FollowPerson;