diff options
Diffstat (limited to 'src/components/Home.tsx')
-rw-r--r-- | src/components/Home.tsx | 73 |
1 files changed, 0 insertions, 73 deletions
diff --git a/src/components/Home.tsx b/src/components/Home.tsx deleted file mode 100644 index 839667a..0000000 --- a/src/components/Home.tsx +++ /dev/null @@ -1,73 +0,0 @@ -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; |