diff --git a/src/components/Dots/index.js b/src/components/Dots/index.js index 279dfcd..e69de29 100644 --- a/src/components/Dots/index.js +++ b/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 ( -
- {[0, 1, 2, 2.35, 2.5, 3, 4, 4.99, 5.5, 7].map((position, index) => ( - - ))} -
- ); -} - -const Dot = ({ value, active, index, setActive }) => { - const click = () => { - setActive(() => index); - window.scrollTo(0, value * window.innerHeight); - - } - return ( -
click()} - > -
-
- ); -};