update src/components/Dots/index.js

src/components/Dots/index.js

@@ -1,83 +0,0 @@
-import React, { useState, useEffect } from "react";
-import _ from "lodash";
-
-export default function Dots() {
-  const [scroll, setScroll] = useState(null);
-  const [active, setActive] = useState(null);
-  const height = window.innerHeight;
-  useEffect(() => {
-    window.addEventListener(
-      "scroll",
-      _.debounce(() => setScroll(window.scrollY), 20)
-    );
-  }, []);
-
-  useEffect(() => {
-    if (window.scrollY < height) {
-      setActive(() => 0);
-    }
-    if (window.scrollY > height && window.scrollY < 2 * height) {
-      setActive(() => 1);
-    }
-    if (window.scrollY > height && window.scrollY < 2 * height) {
-      setActive(() => 2);
-    }
-    if (window.scrollY > 2 * height && window.scrollY < 2.3 * height) {
-      setActive(() => 3);
-    }
-    if (window.scrollY > 2.3 * height && window.scrollY < 2.5 * height) {
-      setActive(() => 4);
-    }
-    if (window.scrollY > 2.5 * height && window.scrollY < 3 * height) {
-      setActive(() => 5);
-    }
-    if (window.scrollY > 3 * height && window.scrollY < 4 * height) {
-      setActive(() => 6);
-    }
-    if (window.scrollY > 4 * height && window.scrollY < 4.99 * height) {
-      setActive(() => 7);
-    }
-    if (window.scrollY > 4.99 * height && window.scrollY < 5.5 * height) {
-      setActive(() => 8);
-    }
-    if (window.scrollY > 5.5 * height && window.scrollY < 7 * height) {
-      setActive(() => 9);
-    }
-  }, [scroll]);
-  
-  return (
-    <div className="flex flex-col items-center fixed z-50 top-1/2 lg:right-3 xl:right-5 transform -translate-y-1/2">
-      {[0, 1, 2, 2.35, 2.5, 3, 4, 4.99, 5.5, 7].map((position, index) => (
-        <Dot key={index} value={position} active={Number(index) === active} setActive={setActive} index={index} />
-      ))}
-    </div>
-  );
-}
-
-const Dot = ({ value, active, index, setActive }) => {
-  const click = () => {
-    setActive(() => index);
-    window.scrollTo(0, value * window.innerHeight);
-
-  }
-  return (
-    <div
-      className={_.join(
-        [
-          "rounded-full mb-2 cursor-pointer transition-all",
-          active ? "p-0.5 border-2" : "p-0",
-        ],
-        " "
-      )}
-      style={{ border : active ? '2px solid blue' : '' }}
-      onClick={() => click()}
-    >
-      <div
-        className={_.join(
-          ["w-3.5 h-3.5 rounded-full", active ? "bg-blueC0" : "bg-blue90"],
-          " "
-        )}
-      ></div>
-    </div>
-  );
-};