feat: typed cursor blink

Author: wkylin

src/components/stateless/TypedText/index.jsx

@@ -1,5 +1,5 @@
 import React, { memo, useState, useEffect } from 'react'
-
+import styles from './index.module.less'
 const TypedText = ({ children, delay = 110 }) => {
   const [revealedLetters, setRevealedLetters] = useState(0)
   const interval = setInterval(() => setRevealedLetters((l) => l + 1), delay)
@@ -10,7 +10,12 @@ const TypedText = ({ children, delay = 110 }) => {
 
   useEffect(() => () => clearInterval(interval), [interval])
 
-  return <>{children.substring(0, revealedLetters)}</>
+  return (
+    <>
+      {children.substring(0, revealedLetters)}
+      <span className={styles.typedCursorBlink}>|</span>
+    </>
+  )
 }
 
 export default memo(TypedText)

src/components/stateless/TypedText/index.module.less

@@ -0,0 +1,10 @@
+.typedCursorBlink {
+  opacity: 1;
+  animation: typed-blink 0.7s infinite;
+}
+
+@keyframes typed-blink {
+  50% {
+    opacity: 0;
+  }
+}