Intro.tsx

import Typewriter from 'typewriter-effect';
import { useEffect, useRef, useState } from 'react';

const Intro = () => {
  const textsAndImages = [
    {
      text: 'Hey there, super awesome friends!',
      pathToSvg: '/src/assets/girly/girly-looking-straight.svg',
    },
    {
      text: "I'm Blo, and I have a story to share with you.",
      pathToSvg: '/src/assets/girly/girl-Rhand-bend.svg',
    },
    {
      text: 'My little brother got diagnosed with diabetes.',
      pathToSvg: '/src/assets/girly/girly-sad.svg',
    },
    {
      text: "It's like a mischievous gremlin in his body!",
      pathToSvg: '/src/assets/girly/girly-arms-up.svg',
    },
    {
      text: 'But we can outsmart it together.',
      pathToSvg: '/src/assets/girly/girl-Rhand-bend.svg',
    },
    {
      text: "That's why I became a diabetes champion to teach you all about it.",
      pathToSvg: '/src/assets/girly/girly-trophy.svg',
    },
  ];

  const [currentIndex, setCurrentIndex] = useState(0);
  const [isAnimationComplete, setIsAnimationComplete] = useState(false);
  const { text, pathToSvg } = textsAndImages[currentIndex];
  const typewriterRef = useRef<any>(null);

  useEffect(() => {
    if (typewriterRef.current) {
      typewriterRef.current.deleteAll(0.0000000000000000000001);
      typewriterRef.current
        .typeString(text)
        .start()
        .callFunction(() => {
          setIsAnimationComplete(true);
        });
    }
  }, [text]);

  const handleClick = () => {
    if (isAnimationComplete) {
      setCurrentIndex((prevIndex) => (prevIndex + 1) % textsAndImages.length);
      setIsAnimationComplete(false);
    }
  };

  return (
    <>
      <div className="flex items-center justify-center">
        <div className="container">
          <div className="text">
            <div id="intro-text" className="font-speech">
              <Typewriter
                options={{
                  delay: 40,
                }}
                onInit={(typewriter) => {
                  typewriterRef.current = typewriter;
                  typewriter
                    .typeString(text)
                    .start()
                    .callFunction(() => {
                      setIsAnimationComplete(true);
                    });
                }}
              />
            </div>
          </div>
          <div className="girly">
            <img src={pathToSvg} alt="girly" className="inline" />
          </div>

          <button
            onClick={handleClick}
            className={`button border-4 border-black font-primary ${
              !isAnimationComplete ? 'bg-gray-main' : 'bg-yellow-500'
            }`}
          >
            Next
          </button>
        </div>
      </div>
    </>
  );
};

export default Intro;