diff --git a/src/components/typewriter-effect.jsx b/src/components/typewriter-effect.jsx index 44cf2f3..fe8fb83 100644 --- a/src/components/typewriter-effect.jsx +++ b/src/components/typewriter-effect.jsx @@ -1,15 +1,8 @@ import { cn } from "@/lib/utils"; import { motion, stagger, useAnimate, useInView } from "framer-motion"; import { useEffect } from "react"; -import { FaStar } from "react-icons/fa"; -export const TypewriterEffect = ({ - words, - className, - cursorClassName, - setCursorVariant, -}) => { - // split text inside of words into array of characters +export const TypewriterEffect = ({ words, className, setCursorVariant }) => { const wordsArray = words.map((word) => { return { ...word, @@ -45,14 +38,14 @@ export const TypewriterEffect = ({ `text-foreground opacity-0 hidden`, word.className, ); - const isPrimary = - word.className && word.className.includes("primary"); + const hasCursorVariant = + word.cursorVariant && word.cursorVariant !== ""; const spanProps = { initial: {}, className: wordClassName, }; - if (isPrimary) { - spanProps.onMouseEnter = handleMouseEnter; + if (hasCursorVariant) { + spanProps.onMouseEnter = () => handleMouseEnter(word.cursorVariant); spanProps.onMouseLeave = handleMouseLeave; } return ( @@ -70,7 +63,7 @@ export const TypewriterEffect = ({ ); }; - const handleMouseEnter = () => setCursorVariant("bigText"); + const handleMouseEnter = (cursorVariant) => setCursorVariant(cursorVariant); const handleMouseLeave = () => setCursorVariant("default"); return ( diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 05bd4d3..ec776f9 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -21,6 +21,7 @@ function Home({ setCursorVariant }) { { text: "Projects", className: "primary text-primary dark:text-primary font-bold", + cursorVariant: 'bigText' }, ]; @@ -56,7 +57,11 @@ function Home({ setCursorVariant }) { key={item} initial={{ width: 0 }} animate={{ width: 150 }} - transition={{ duration: 2, ease: [0.22, 1, 0.36, 1] }} + transition={{ + duration: 2, + ease: [0.22, 1, 0.36, 1], + delay: 0.3, + }} className="h-[1px] bg-primary" /> ))}