adrianbonpin
cd72b7a948
- Move web app into apps/web/ - Create packages/shared/ with shared types - Create plugins/decky-vault/ scaffold - Root package.json manages workspaces only
38 lines
955 B
TypeScript
38 lines
955 B
TypeScript
"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>
|
|
)
|
|
}
|