diff options
Diffstat (limited to 'client/src/components/Home.tsx')
-rw-r--r-- | client/src/components/Home.tsx | 73 |
1 files changed, 73 insertions, 0 deletions
diff --git a/client/src/components/Home.tsx b/client/src/components/Home.tsx new file mode 100644 index 0000000..839667a --- /dev/null +++ b/client/src/components/Home.tsx @@ -0,0 +1,73 @@ +import React from 'react'; +import { useEffect, useRef, useState } from 'react'; +import './active.css'; + +function Home() { + const [index, setIndex] = useState(0); + const colors = ['#FF0000', '#00FF00', '#0000FF']; + const timeout = useRef(0); + + useEffect(() => { + resetTimeout(); + timeout.current = window.setTimeout( + () => + setIndex((prevIndex) => + prevIndex === colors.length - 1 ? 0 : prevIndex + 1 + ), + 2500 + ); + + return () => { + resetTimeout(); + }; + }, [index]); + + const resetTimeout = () => { + if (timeout.current) { + clearTimeout(timeout.current); + } + }; + + return ( + <div style={{ margin: 'auto', overflow: 'hidden' }}> + <div + style={{ + whiteSpace: 'nowrap', + transform: `translateX(${-index * 100}%)`, + transition: 'ease 1000ms', + }} + > + {colors.map((backgroundColor, colorIndex) => ( + <div + key={colorIndex} + style={{ + display: 'inline-block', + backgroundColor, + height: '80vh', + width: '100%', + }} + /> + ))} + </div> + <div style={{ display: 'flex', justifyContent: 'center' }}> + {colors.map((_, colorIndex) => ( + <div + key={colorIndex} + style={{ + height: '0.75rem', + width: '0.75rem', + borderRadius: '50%', + margin: '0.75rem', + }} + className={colorIndex === index ? 'active' : 'inactive'} + onClick={() => { + setIndex(colorIndex); + }} + /> + ))} + </div> + </div> + ); +} + +export default Home; |