Add golang server

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;