Initial commit

components/mdx/ReadingProgressBar.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export function ReadingProgressBar() {
+    const [progress, setProgress] = useState(0);
+
+    useEffect(() => {
+        const updateProgress = () => {
+            const scrollTop = window.scrollY;
+            const docHeight = document.documentElement.scrollHeight - window.innerHeight;
+            const readPercent = scrollTop / docHeight;
+            setProgress(readPercent * 100);
+        };
+
+        window.addEventListener('scroll', updateProgress);
+        return () => window.removeEventListener('scroll', updateProgress);
+    }, []);
+
+    return (
+        <div className="fixed top-0 left-0 w-full h-1 z-[100] bg-transparent">
+            <div
+                className="h-full bg-zinc-900 dark:bg-zinc-100 transition-all duration-100 ease-out"
+                style={{ width: `${progress}%` }}
+            />
+        </div>
+    );
+}