Intro.tsx

interface IntroProps {
  pathToSvg: string;
  text: string;
}

const Intro = (props: IntroProps) => {
  const textLength = props.text.length;
  const animation = `typing ${textLength / 20}s steps(${Math.floor(
    textLength * 2
  )}), blink-caret 0.75s step-end infinite`;
  console.log(animation);
  return (
    <>
      <div
        className="typing-effect w- mb-5"
        style={{
          animation: animation,
        }}
      >
        <span className="text">{props.text}</span>
      </div>
      <div>
        <img src={props.pathToSvg} alt="girly" className="mt-12" />
      </div>
    </>
  );
};

export default Intro;