From f8ba2d0370e1e298d2de7ebc9beaefd09e4bc019 Mon Sep 17 00:00:00 2001
From: Adrian Bonpin <adrianbonpin@gmail.com>
Date: Fri, 1 May 2026 09:33:12 +0800
Subject: [PATCH] feat: add ReadingProgressBar component

---
 components/updates/reading-progress-bar.tsx | 37 +++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 components/updates/reading-progress-bar.tsx

diff --git a/components/updates/reading-progress-bar.tsx b/components/updates/reading-progress-bar.tsx
new file mode 100644
index 0000000..bf32319
--- /dev/null
+++ b/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>
+  )
+}