update src/components/Dots/index.js

src/components/Dots/index.js

@@ -0,0 +1,88 @@
+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>
+  );
+};