first commit

components/common/OdometerComponent.jsx

@@ -0,0 +1,70 @@
+"use client";
+
+import React, { useEffect, useRef, useState } from "react";
+
+const OdometerComponent = ({ max }) => {
+  const odometerRef = useRef(null);
+  const [value, setValue] = useState(0);
+  const odometerInitRef = useRef();
+
+  useEffect(() => {
+    import("odometer").then((Odometer) => {
+      // Initialize Odometer or do something with it
+
+      // Example usage of Odometer
+      if (Odometer && odometerRef.current) {
+        odometerInitRef.current = new Odometer.default({
+          el: odometerRef.current,
+          value,
+        });
+      }
+    });
+  }, []);
+  useEffect(() => {
+    if (odometerRef.current && odometerInitRef.current) {
+      odometerInitRef.current.update(value); // Update odometer when value changes
+    }
+  }, [value]);
+
+  const startCountup = () => {
+    setValue(max);
+  };
+
+  useEffect(() => {
+    const handleIntersection = (entries, observer) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          startCountup();
+          observer.unobserve(entry.target);
+        }
+      });
+    };
+
+    const options = {
+      root: null,
+      rootMargin: "0px",
+      threshold: 0.5,
+    };
+
+    const observer = new IntersectionObserver(handleIntersection, options);
+    if (odometerRef.current) {
+      observer.observe(odometerRef.current);
+    }
+
+    return () => {
+      if (odometerRef.current) {
+        observer.unobserve(odometerRef.current);
+      }
+    };
+  }, []);
+
+  return (
+    <>
+      <div ref={odometerRef} className="odometer">
+        0
+      </div>
+    </>
+  );
+};
+
+export default OdometerComponent;