feat: add ReadingProgressBar component

components/updates/reading-progress-bar.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import { useEffect, useState } from "react"
+
+export function ReadingProgressBar() {
+  const [progress, setProgress] = useState(0)
+
+  useEffect(() => {
+    const updateProgress = () => {
+      const scrollTop = window.scrollY
+      const scrollHeight = document.documentElement.scrollHeight
+      const clientHeight = window.innerHeight
+      const maxScroll = scrollHeight - clientHeight
+
+      if (maxScroll <= 0) {
+        setProgress(0)
+        return
+      }
+
+      setProgress((scrollTop / maxScroll) * 100)
+    }
+
+    window.addEventListener("scroll", updateProgress, { passive: true })
+    updateProgress()
+
+    return () => window.removeEventListener("scroll", updateProgress)
+  }, [])
+
+  return (
+    <div className="fixed top-[3.6rem] left-0 right-0 z-40 h-0.5 bg-border">
+      <div
+        className="h-full bg-primary transition-[width] duration-150 ease-out"
+        style={{ width: `${progress}%` }}
+      />
+    </div>
+  )
+}