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="grid h-screen place-items-center">*/}
      <div className="container">
        <div className="text">
          <div id="intro-text" className="font-primary">
            <Typewriter
              options={{
                delay: 40,
              }}
              onInit={(typewriter) => {
                typewriterRef.current = typewriter;
                typewriter
                  .typeString(text)
                  .start()
                  .callFunction(() => {
                    setIsAnimationComplete(true);
                  });
              }}
            />
          </div>
        </div>
        <div className="girly justify-center">
          <img src={pathToSvg} alt="girly" />
        </div>

        <button
          onClick={handleClick}
          className={`button max-h-[4rem] max-w-xs border-4 border-black p-2 ${
            !isAnimationComplete ? 'bg-gray-main' : 'bg-yellow-500'
          }`}
        >
          Next
        </button>
      </div>
    </>
  );
};

export default Intro;