1 files changed, 47 insertions, 0 deletions

diff --git a/src/components/TrackActiveSection.tsx b/src/components/TrackActiveSection.tsx
new file mode 100644
index 0000000..bb1b2ee
--- /dev/null
+++ b/src/components/TrackActiveSection.tsx
@@ -0,0 +1,47 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Kristóf Marussy
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+import { type ReactNode, useEffect, useCallback, useRef } from 'react';
+
+import { useActiveSection } from './ActiveSectionProvider';
+
+export default function TrackActiveSection({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  const { setHash } = useActiveSection();
+  const elementRef = useRef<HTMLDivElement | null>(null);
+  const callback = useCallback(() => {
+    const { current: element } = elementRef;
+    if (!element) {
+      return;
+    }
+    const currentID = Array.from(element.children)
+      .reverse()
+      .find((child) => child.getBoundingClientRect().top <= 60)?.id;
+    const currentHash =
+      currentID === undefined || currentID === '' ? '' : `#${currentID}`;
+    setHash(currentHash);
+  }, [setHash]);
+  const setElement = useCallback(
+    (element: HTMLDivElement | null) => {
+      elementRef.current = element;
+      if (element) {
+        callback();
+      } else {
+        setHash(undefined);
+      }
+    },
+    [setHash],
+  );
+  useEffect(() => {
+    window.addEventListener('scroll', callback);
+    return () => window.removeEventListener('scroll', callback);
+  });
+
+  return <div ref={setElement}>{children}</div>;
+}