summaryrefslogtreecommitdiff
path: root/src/components/Home.tsx
diff options
context:
space:
mode:
authorMichael Hunteman <michael@huntm.net>2024-05-17 15:20:30 -0700
committerMichael Hunteman <michael@huntm.net>2024-05-17 15:20:30 -0700
commit7103019890960e793deefb64987a09b33be60b42 (patch)
treec1c9402aa250c68b2cbe13d62598232bbf20b1e2 /src/components/Home.tsx
parentfc5c111bcfe296bec82e1cf9fdb88fc80fb24f89 (diff)
Add golang server
Diffstat (limited to 'src/components/Home.tsx')
-rw-r--r--src/components/Home.tsx73
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;