add hook isVisible

[TymekGluch]

Description:

add hook and adjust that code (changing state to better state menagment and add types)

export function useIsVisible(ref) {
  const [isPartiallyVisible, setPartiallyVisible] = useState(false);
  const [isFullyVisible, setFullyVisible] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      setPartiallyVisible(entry.isIntersecting);
      setFullyVisible(entry.intersectionRatio === 1);
    }, {
      threshold: [0, 1] // 0 - when any part of the element is visible, 1 - when the entire element is visible
    });

    observer.observe(ref.current);
    return () => {
      observer.disconnect();
    };
  }, [ref]);

  return { isPartiallyVisible, isFullyVisible };
}