first commit

components/elements/Counter.js

@@ -0,0 +1,56 @@
+import { useEffect, useRef, useState } from 'react'
+
+
+export default function Counter({ end, duration }) {
+    const [count, setCount] = useState(0)
+    const countRef = useRef(null)
+    const increment = end / duration
+
+    useEffect(() => {
+        const observer = new IntersectionObserver(
+            ([entry]) => {
+                if (entry.isIntersecting) {
+                    startCount()
+                    observer.disconnect()
+                }
+            },
+            { threshold: 0 }
+        )
+
+        if (countRef.current) {
+            observer.observe(countRef.current)
+        }
+
+        return () => {
+            observer.disconnect()
+        }
+    }, [])
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setCount((prevCount) => {
+                const newCount = prevCount + increment
+                if (newCount >= end) {
+                    clearInterval(interval)
+                    return end
+                } else {
+                    return newCount
+                }
+            })
+        }, 1000 / duration)
+
+        return () => {
+            clearInterval(interval)
+        }
+    }, [end, increment])
+
+    const startCount = () => {
+        setCount(0)
+    }
+
+    return (
+        <span ref={countRef}>
+            <span>{Math.round(count)}</span>
+        </span>
+    )
+}