mirror of
https://github.com/cupcakearmy/old.nicco.io.git
synced 2025-09-06 18:50:45 +00:00
remove unecessary
This commit is contained in:
38
screens/Letters.tsx
Normal file
38
screens/Letters.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
import React, { useEffect, useRef, useState } from 'react'
|
||||
|
||||
import LetterAnimation from '../components/LetterAnimation'
|
||||
|
||||
import '../styles/Letters.styl'
|
||||
|
||||
|
||||
|
||||
type Pair = [string, string]
|
||||
|
||||
const pairs: Pair[] = [
|
||||
['visualize', 'create'],
|
||||
['invision', 'build'],
|
||||
['ideate', 'deploy'],
|
||||
]
|
||||
|
||||
export const Duration = 4000
|
||||
|
||||
const Letters: React.FC = React.memo(() => {
|
||||
|
||||
const [index, setIndex] = useState<number>(0)
|
||||
const wrapper = useRef<HTMLElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(
|
||||
() => setIndex((index < pairs.length - 1) ? index + 1 : 0),
|
||||
Duration,
|
||||
)
|
||||
}, [index])
|
||||
|
||||
return <span id={'letters-wrapper'} ref={wrapper}>
|
||||
<LetterAnimation text={pairs[index][0] + '.'} />
|
||||
<br />
|
||||
<LetterAnimation text={pairs[index][1] + '.'} delay={500} />
|
||||
</span>
|
||||
})
|
||||
|
||||
export default Letters
|
Reference in New Issue
Block a user