Fixing errors

AB10110F · Aug 13, 2023 · c8e8188 · c8e8188
1 parent 5c56990
commit c8e8188
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -14,8 +14,8 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <Dots/>
       <body>
+      <Dots/>
         {children}
       </body>
     </html>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -19,7 +19,7 @@ export default function Home() {
     <main className={bright}>
       <span className={scanner}></span>
       <Image src="/scanlines.jpg" width={500} height={500} className={scanlines} alt="image" />
-      <Typewriter text={'F ront-End Developer'}/> {/* TODO What is wrong with the position 1? */}
+      <Typewriter text={'Front-End Developer'}/>
       <div className={styles.grid}>
             <Terminal/>
             <section className={styles.column}>

diff --git a/src/components/Typewriter.tsx b/src/components/Typewriter.tsx
@@ -4,13 +4,18 @@ import { dotFont } from '../fonts/fonts'
 const Typewriter = ({ text }: { text:string }) => {
     const index = useRef(0);
     const [currentText, setCurrentText] = useState('');
-
-    useEffect(()=>{
-        setTimeout(()=>{
-            setCurrentText((value) => value + text.charAt(index.current));
+
+    useEffect(() => {
+      if (index.current < text.length) {
+          const nextChar: string = text.charAt(index.current);
+          const timer = setTimeout(() => {
+            setCurrentText(val => val + nextChar);
             index.current++;
-        }, 80);
-    }, [currentText]);
+          }, 80);
+
+          return () => clearTimeout(timer);
+        }
+      }, [currentText, text]);
 
     return <h1 style={dotFont.style} >&gt;{currentText}</h1>
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,8 +14,8 @@ export default function RootLayout({ @@
     }) {
       return (
         <html lang="en">
-          <Dots/>
           <body>
+          <Dots/>
             {children}
           </body>
         </html>
@@ Expand Down @@